Language/HTML(5)
-
[HTML] CSS 적용 우선순위 - CSS Specificity
요소에 CSS 의 속성 값을 적용할 때 만약 2개 이상의 CSS 의 속성 값이 같은 요소를 가리키는 경우 어떤 CSS 속성 값을 우선 적용하게 될까? 이 때 적용되는 기준이 바로 'CSS Specificity(CSS 특이성)' 이다. 우선순위가 높은 특이성을 가진 CSS 에 작성된 속성이 HTML 요소에 적용된다고 한다. 오늘은 이 CSS Specificity 에 대해 알아보자. 1. CSS Specificity HTML 문서 작성시 문서내의 요소를 2개 이상의 CSS 속성이 가리키는 경우가 생기거나 더러있다. 이럴 경우 어떤 CSS 속성을 기준으로 요소에 속성 값이 적용될까? 이럴 때 어떤 CSS 의 속성을 요소에 적용할지 결정하는 기준(점수,등급)이 CSS Specificity 이다. 1-1. 상..
2024.08.30 -
[HTML] OpenAPI 다루기 - function, fetch
'fetch' 는 엄밀히 말해 'Javascript' 의 메서드이지만 HTML 문서에서 외부의 리소스를 가져올 때 사용하게 되므로 일단은 'HTML' 카테고리에 정리해 보았다. 1. function '함수' 를 정의할 때 사용되는 키워드 Javascript 에서 함수를 정의할 때는 'function' 키워드와 함수명, 소괄호가 필요하다!Java 의 경우 '접근제어 반환타입 함수명(파라미터) { 함수 수행 코드};' 라면 Javascript 에서는 'function 함수명(파라미터) { 함수 수행 코드 };' 인 것이다.'function 의 실행 코드는 누군가(?) 해당 함수를 호출하면 수행된다.Javascript 의 기능이므로 HTML 문서내 서버에서 리소스를 가져오는 프로세스를 수행 HTML 문서 외부..
2024.08.29 -
[HTML] 꾸미기 - <style>, CSS
CSS 란 'Cascading Style Sheets(계단식 스타일 시트)' 의 약어로 다양한 정의가 있겠지만 한 마디로 화면을 꾸며주는 역할을 한다. 그래도 정확한 기능을 적어보자면 '여러 웹 페이지의 레이아웃을 한 번에 제어하여 많은 작업을 줄여준다' 고 한다. HTML 문서에 CSS 를 적용하는 방법은 3가지가 있다고 한다.Inline : HTML 요소(=태그) 내부의 style 속성을 사용. 이건 아마 태그별 속성을 사용해 특정 값을 지정하여 형태를 취하는 걸 말하는 것 같다.Internal : HTML 문서의 스타일 정보(=CSS) 를 정의하는데 사용되는 태그 꾸며야 한다? 그럼 영역의 너비(width)와 높이(height)를 지정할 때 사용 한 마디로 영역의 가로, 세로 길이를 지정하는 것!각..
2024.08.27 -
[HTML] HTML5 태그 - <h1>, <p>, <span>, <button>, <div>
당연하게도 HTML 에는 수 많은 태그(=요소)들이 존재한다. 이번에는 그 중에서도 학습을 하면서 사용해본 기본적인 태그들 중 , , 에 대해 알아보려 한다. 1. , , ... , 요것은 제목! - h1 요것은 부제목! - h2 이건 뭐라 부르지? - h6작성 내용의 제목(heading)을 나타내는 태그 태그류는 영역에 작성, 1부터 6까지의 넘버링을 갖는다.찾아본 내용들이 다 '제목' 이라는 표현을 사용하는데 나의 경우 'md(Markdown, 마크다운)' 에서 사용하는 '#' 과 비슷하다 느껴 텍스트의 중요도 표현이나 문서를 구분짓는 용도로 이해하였다., 의 경우 다른 일반 텍스트와 확연히 차이가 보여 자주 사용하겠지만 나머지 넘버들은 일반 텍스트보다 눈에 띄지도 않고 크기..
2024.08.27 -
[HTML] HTML5 - 기본 구성
'VS code' 를 통해 'html' 문서를 작업할 때 'html:5' 를 입력하면 아래와 같은 기본 틀이 자동 구성된다. 하나하나 뜯어보자! 1. HTML5 - 기본 구성(틀) 1-1. 현재 문서가 'HTML5' 문서임을 정의'DOCTYPE' 이란 단어는 아마 'DOCUMENT TYPE(문서 타입)' 의 줄임말로 보인다. 1-2. HTML 페이지(문서를 의미하는 듯)의 루트 요소(최상위)루트 요소인 만큼 한 HTML 페이지에 하나가 존재하는게 아닐까라는 생각을 해본다.해당 요소의 태그 안에 작성된 lang="en" 구문은 해당 요소에 포함되는 모든 기본언어를 영어로 지정하겠다는 의미이다. 예시의 경우 루트 요소인 에 작성해 해당 페이지의 기본언어가 영어로 설정되었다.lang 속성 을 ..
2024.08.27