-
CSS 모델 박스 이해하기 (content, padding, border, margin)
CSS 모델 박스란? HTML 요소를 감싸는 박스의 구조를 말한다. 콘텐츠(content), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)으로 구성되어 있다. 위 이미지를 기준으로 가장 가운데부터 content, padding, border, margin 순서이다. content 박스의 내부에 표시되는 실제 내용이다. 텍스트, 이미지, 미디어 등이 여기에 포함된다. padding 콘텐츠와 테두리 사이의 공간이다. padding은 요소의 내부 공간을 조절하며, 내용과 테두리 사이의 간격을 제어한다. border 콘텐츠와 바깥 여백 사이에 위치하며, 요소의 가장자리를 감싸는 선이다. 테두리는 주로 요소의 외형을 강조하거나 시각적인 구분을 위해 사용된다. 바깥 여백 요소의 외부 ..
2024.04.22
-
CSS를 적용 하는 방법과 우선 순위
CSS를 적용하는 방법에 대해서 알아보자. CSS란? Cascading style Sheets의 약자로 웹페이지의 스타일, 레이아웃 및 디자인을 정의하는 언어다. CSS를 적용하는 방법엔 총 3가지가 있다. 내부 스타일 시트 외부 스타일 시트 인라인 스타일 CSS를 적용하는 방법 3가지를 알아보기 전에 CSS에 선택자를 알아보자. 선택자 CSS를 적용시키기 위해선 HTML에 태그를 선택해야 된다. 선택하는 방법은 3가지가 있다. 첫 번째는 요소 선택자로 태그명으로 선택하는 방법이다. 태그에 이름을 직접 입력 h1{ /* CSS 속성값 */ } 두 번째는 클래스 선택자로 태그를 선택하는 방법이다. 클래스명은 HTML요소에 "class"를 표기한다. 클래스 선택자를 사용했을 시 같은 클래스를 가지고 있는 여..
2024.04.17
-
시맨틱 태그에 종류와 구조
시맨틱 태그에 종류와 구조에 대해서 알아보자. 시맨틱태그란? 웹페이지의 구조를 더 명확하게 정의하고, 검색 엔진, 스크린 리더와 같은 도구가 콘텐츠를 더 잘 이해할 수 있게 HTML5에 도입된 태그다. 웹 사이트 제목 메뉴1 메뉴2 메뉴3 메뉴4 소개 소개 내용... item 소개 item 1 item 1에 대한 설명... item 2 item 2에 대한 설명... 광고 광고 내용... copyright; 2024 웹 사이트 이용약관 개인정보 처리방침
2024.04.17
-
HTML 기본 구조 태그
HTML 문서의 구조를 형성하는 태그들은 다음과 같다. 문서의 타입을 정의하며 HTML5의 경우 로 정의한다. HTML 문서의 루트 요소를 정의하며, 모든 요소는 해당 태그 안에 포함되어야 한다. 인코딩이란? 문자를 컴퓨터가 이해할 수 있게 바이트(byte) 형태로 변환하는 과정을 의미한다. 컴퓨터는 문자를 이진수 형태로 처리하기에 텍스트를 컴퓨터로 이해할수 있게 변환해야 된다. 이때 사용되는 것이 문자 인코딩이며, 가장 많이 사용되는 인코딩 방식은 UTF-8이다. UTF-8은 유니코드 문자 집합을 나타내는 인코딩 방식 중 하나로, 다양한 언어의 문자를 처리할 수 있기에 가장 많이 사용되고 있다. 그 외에 UTF-16, ISO-8859-1, EUC-KR 등에 인코딩 방식이 있다. title 태그는 웹 페..
2024.04.16