HTML이란?
html이란 웹페이지의 구조와 콘텐츠를 정의하는 언어 이다. 그리고 시멘틱 요소를 이용하여 웹 페이지의 구조를 설계한다.
HTML 기본 선언 설명
<html></html> : HTML의 문선 시작과 끝을 선언합니다. <head></head> : HTML 전제 정보와 스타일, 스크립트라는 문서요소를 컨트롤 합니다. <body>전에 </head>를 닫습니다. <body></body>: HTML의 중심되는 부분으로 사용자가 보이는 다양한 표현과 기능을 태그로 구현합니다.시멘틱 요소란..?🤔
웹페이지의 레이아웃만을 위한 요소로, 의미를 가진 요소를 말한다. 즉 스스로 브라우저와 개발자에게 사용된 의미를 명확히 전달해주는 요소를 의미한다.
<!-- 시멘틱 요소의 종류 --> <header> <nav> <main> <article> <section> <article> <aside> <figure> <img> <footer>시멘틱 마크업이란?
시맨틱 태그란 마크업 대상 컨텐트가 화면에 표현되는 방식 시작적으로 어떻게 보이는지를 결정하기 위함이 아닌, 해당 컨텐츠에 어떤 의미(역할 또는 목적)를 부여하기 위해서 사용되는 태그
시맨택 태그를 사용하면 좋은 점
웹 접근성에 효율적
유지보수의 용이성
Doctype 이란..?🤔
HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것.
Doctype을 쓰는 이유?
1.) 렌더링모드를 선언하는 용도로 사용된다.
렌더링 모드란 웹페이지를 번역, 또는 읽는 방식으로써, 다양한 웹브라우저에서 웹표준에 따라 웹페이지를 올바르게 표시하도록 만들어 주는 것.
렌더링 모드에는 표준 모드와 비표준 모드가 존재한다.
표준모드는 Doctype을 선언함으로써 실행이 되고, 웹표준에 따라 렌러링 된다.
비표준 모드는 Doctype을 선언하지 않으면 실행되고, 구 브라우저처럼 렌더링 되어지므로 올바르게 표현하지 못한다.
2.) 두번째로는 HTML버전을 선언하는 용도르 사용된다. 이를 DTD라고 한다. 무선형 정의는 HTML5, XHTML, HTML의 세 가지 문서 유횽이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성 등을 처리하는 기준이 되며 유효성 검사에 이용된다.
DTD(Document Type Definition, 문서 타입 정의)에 따라 HTML 가장 상단에 선언하는 코드다. 이 DTD는 브라우저에게 문서 형식을 알려주는 부분으로 이 선언부에 따라 브라우저는 렌더링 모드를 바꾸고 해당 렌더링 모드에 맞게 사용할 수 있는 태그와 속성이 변경된다.
여기서 문서 타입 정의는 XML 문서의 구조 및 해당 문서에서 사용할 수 있는 적법한 요소와 속성을 정의합니다.
❗️Doctype을 사용하지 않으면..?
각 브라우저의 엔진이 렌더링 모드를 결정할 때 문서 첫 부분의 독타입을 참조하게 된다. 독타입을 선언하지 않으면 브라우저가 해당 문서의 형식을 알 수 없게 된다.
브라우저는 표준 모드가 아닌 비표준 모드로 렌더링 모드를 변경하게 되면서 문서 제작자가 의도한 레이아웃(태그의 구조, CSS 등)이 깨지게 되어 사용자에게 정상적인 상태의 문서를 보여주지 못하게 된다.
이 표준 모드를 유지하는 것을 크로스 브라우징이라고 한다.
크로스 브라우징이란?
웹 페이지 제삭 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성)나오게 하는 작업을 말한다.HTML,CSS,JS작성시 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 외도 된 대로 보여지고 작동되는 기법. 허나 현실적으로 우리가 사용하는 웹브라우저들은 각기 다른 속성과 기술요소(렌더링 엔진)가 존재하며, 이로 인해 웹브라우저가 별로 표현하는 것에는 차이가 있을 수 밖에 없다. 모든 브라우저에서 동이라헥 보여준다는 현실적으로 불가능한 얘기라는 뜻, 다만 크로스 브라우징은 최대한 다양한 브아주저에서 제작자가 의도한 내용을 이상 없이 동작하게 해준다.
메타 태그란?
메타 태그는 페이지에 대한 중요한 정보를 검색 엔진에 제공하는 요소로 HTML 코드의 헤더 섹션에 있습니다. 메타 태그는 검색 엔진에 사용자에게 페이지를 표시하는 방법과 검색 결과에 표시되는 방법을 알려줍니다.
lang속성
<html lang="ko">lang속성은 실제 웹 브라우저가 동작하는 데 어떠한 영향도 끼치지 않습니다. 대신 구글과 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식하게 만든다.
메타 데이터: 요소
메타데이터는 데이터를 설명하는 데이터이다.쉽게 말해 사이트 자체에 대한 정보나, 저작자, 문서의 언어 등을 말합니다.
<!--문자의 character 인코딩을 특정하기-->
<meta charset="utf-8" />왜 http-equiv를 사용하는가?
마이크로소프트에서 만든 익스플로서 블라우저는 호환성 보기 모드가 존재하는데 이는 사용자가 지원하는 브라우저에 따라 오래된 브라우저에서 정상적으로 출력되지 않는 이슈가 발생할 수 있다. 결국 오래된 브라우저 지원을 위해서 http-equiv를 사용하였다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-모든 IE 브라우저에서 호환성 보기를 무시해줍니다. -->meta viewport 태그
이 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트 크기 조절을 위해 만들었습니다.
viewport란?🤔 우리말로 보임창, 즉 화면 상의 화상 표시 영역을 뜻한다.
viewport 크기 조절이 필요한 이유?🤔 데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 뷰포드가 980px 이기 때문에 내용이 작게 보인다.
<meta name="viewport" content="width=device-width">
<!--브라우저 너비를 장치 너비에 맞추어 표시함-->🤔initial-scale이란..? 뷰포트의 초기 배율(곱하는 수)
기본값: 보이는 영역에서 웹페이지에 맞추기 위해 계산됨
범위: minimum-scale과 maximum-scale 속성 값으로 결정됨
HTML 5란?
HTML5는 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어입니다.
가장 특징적인 것은 기존의 웹 문서에서는 HTML 만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 이에 대한 부가 기능을 제공함으로써 다른 외부 Active-x 와 같은 plus-ins 를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었습니다.
active-x란?
웹브라우저와 연동되는 특정 프로그램을 사용자의 pc에 추가로 설치해 웹브라우저의 기능을 확장시키는 것으로 엑티브엑스가 설치되면 사용자의 pc에서 이를 실행하는 것 만으로 손쉽게 웹사이트와 기능이 연동되므로, 웹사이트 쪽에서 사용자 pc의 기능을 제어하는 과정도 매우 간편한다.
😢하지만 단점도 존재한다. 가장 큰 단점은 마이크로소프트의 인터넷익스플로러에서만 쓸 수 있다는 점이다. 구글의 크롬과 같은 타사의 웹브라우저가 점유율을 크게 끌어올림으로 인해 액티브엑스를 전혀 사용할 수 없다. 즉, 호환성 문제에서 부작용을 가지고 있다.
HTML5의 주요 기능
device access: 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
CONNECTIVITY(Web Socket): 웹(클라이언트)에서 서버 측좌 직접전인 양방향 통신 기능
3D, GRAPHIC & EFFECTS: 다양한 2차원 및 3차원 그래픽 기능을 지원
Styling Effects: 글씨체, 색상, 배경 등 다양한 스타일 및 이벤트 기는ㅇ 제공
MULTIMEDIA: 비디오 및 오디오 기능을 자체적으로 지원
OFFLINE & STORAGE: 네트워크 미지원 환경에서도 웹 이용을 가능하게 함.
Geo-Location: GPS 없이도 단말기의 지리적인 위치 정보를 제공
SEMANTICS: 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공
CSS 란?
웹페이지의 디자인을 담당하는 스타일 시트 언어입니다.
css선택자란?
css3선택자는 특정한 HTML 태그를 선택할 때 사용하는 가능입니다.
css Position?
css position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성입니다. 따라서 position 속성에 쓸 수 있는 값은 5개가 있습니다.
1. static(기본값): element에 position을 지정하지 않았을 때 기본으로 적용되는 값이 static이다.
2. relative: element가 문서의 일반적인 흐름에 따라 배치가 됩니다 relative를 적용하면 적용된 요소의 배치만 변경되고 다른 부분의 배치에는 영향을 주지 않습니다.
❗️static과의 차이점은 element가 자신의 static 위치에서 top, right, bottom, left 와 같은 속성에 의한 상대적인(relative)위치에 배치된다는 점
3. absolute: element가 문서의 일반적인 흐름을 따르지 않으며 가장 가까운 위치에 있는 조상 element (static 이 아닌)에 상대적 위치로 배치됩니다.
조상 element가 없으면 body 기준으로 됩니다.
4. fixed: absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다. 대신 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.
5. sticky: sticky는 element가 문서의 일반적인 흐름에 따라 배치되며 top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative)위치에 배치됩니다.MARGIN VS PADDING
Margin은 Border 바깥쪽을 차지한다. 주변 요소와 거리를 두기 위한 영역입니다.
Padding은 Content와 Border 사이의 여백을 나타내는 영역이며 Content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다.즉 Padding 영역도 Content의 연장으로 볼 수 있다.
❗️차이점은 Margin만 음수값이다 auto 값을 적용 가능하다.
px, em , rem 단위들의 차이점
Px
가장 기본적으로 사용되는 단위입니다. 이것을 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다.
em(배수 단위)
em은 부모요소를 기준으로 자식 요소의 크기를 정하는 것을 말한다.
rem
rem은 root em의 약자입니다. 즉 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다. rem 시스템은 모바일 환경에서 접근성을 위해 글자 크기를 키우거나 그리드 시스템에 사용하기에 유용합니다.
웹 접근성이란?
웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
비장애인이 웹상에서 제공되는 텍스트와 이미지, 영상 등을 접했을 경우, 한눈에 재빨리 내용 파악이 가능하지만, 장애인은 그렇지 않습니다. 그림이나 사진들을 제공할 때는 눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신 할 수 있는 설명을 텍스트로 제공하야 하며, 동영상이나 오디오의 경우 청각장애인을 위한 음성정보를 문자로 제공해야 합니다. 또한 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 하야 하며, 움직임이 느린 사용자를 위해 시간조절기능을 제공해야 합니다.
웹 접근성 필요성
누구에게나 동등한 기회 제공을 위해 웹 접근성 준수 필요
웹 접근성을 준수하게 되면, 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이용할 수 있게 됩니다. 현대 사회에서 웹은 교육, 고용, 정부 전자상거래, 건강, 여가 등 삶의 여러 가지 측면들에서 점점 더 중요한 자원으로 활용되고 있습니다. 하지만 아직까지 우리나라의 많은 웹 사이트들이 웹 접근성을 고려하지 않음으로서 장애인 및 고령자들의 인터넷 이용률이 비장애인에 비해 크게 낮은 실정입니다.
그러하여 국내에서는 과학기술정보통신부에서 '웹 접근성 품질마크' 인증 제도를 통해 사이트의 웹 접근성 준수 여부를 관리하고 있습니다. 이 인증 제도는 과학기술정보통신부에서 지정한 인증기관의 심사를 통과한 사이트에 품질마크를 부여하는 제도입니다.(인증기관: 국내 3곳. (사)한국장애인단체총연합회 한국 웹 접근성 인증평가원 (주)웹와치, 한국시간장애인협회.
한국형 웹 콘텐츠 접근성 지침은 크게 원칙, 지침, 검사 항목까지 3단계로 구성되어 있습니다.
원칙에는 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성이 있으며 이들 원칙을 준수하기 위한 14개의 지침, 그리고 지침 준수를 확인하기 위한 33가지 검사 항목이 존재합니다.
인식의 용이성
사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 인식할 수 있어야 합니다. 인식의 용이성에는 대체 텍스트 제공, 멀티미디어 대체수단 제공, 콘텐츠 적응성, 콘텐츠 명료성이라는 네 가지 지침이 포함되어 있습니다.
1.) 대체 텍스트 제공
이미지, 영상과 같이 텍스트가 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 인식할 수 있도록 간단하고 명료한 내용의 대체 텍스트를 제공해야 합니다. img ,area등의 alt 속성에 적절한 대체 텍스트를 제공하는 것 등을 예시로 들 수 있습니다.
2.) 멀티미디어 대체수단 제공
멀티미디어 콘텐츠에는 해당 콘텐츠와 같은 내용의 자막, 대본 수어 중 최소 한 가지 이상의 대체 수단을 제공해야 합니다. 가장 권장되는 방법은 자막을 오디오와 동기화기켜 제공하는 것
3.) 콘텐츠 적응성
표를 제공할 경우 표의 이해를 돕기 위한 내용과 구조에 대한 정보를 제공하고, 전체 콘텐츠는 보조기술 사용자가 그 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 합니다. 또한 콘텐츠 사용에 필요한 지시사항은 모양, 크기, 방향, 색 , 소리 등과 관계없이 여러 가지 다른 감각을 통해서도 인식하는 데 문제가 없어야 합니다.
4.) 콘텐츠 명료성
콘텐츠는 색과 관계없이 인식될 수 있어야 하여, 텍스트와 배경 간의 명도 대비는 4.5:1 이상이어여 합니다. 또한, 이웃한 콘텐츠는 테두리나 명도 대비, 글자 간격 등 시각적인 방법을 통해 서로 구별할 수 있게 설계하는 것이 바람직합니다. 마지막으로 하면 낭독 프로그램 사용자가 콘텐츠를 인식하고 사용하는데 방해되지 않도록 소리가 자동으로 재생되지 않아야 합니다.
운용의 용이성
사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 운용할 수 있어야 합니다. 운용의 용이성에는 입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션, 입력 방식이라는 5가지 지침이 포함되어 있습니다.
1.) 입력장치 접근성
붓질 기능, 시뮬레이션 등 마우스의 커서 궤적이 중요한 역할을 하는 콘텐츠, 움직임 측정 센서를 이용하는 콘텐를 제외한 모든 기능은 키보드만으로도 사용할 수 있게끔 만들어져햐 합니다. 모든 기능을 키보드만으로 조작해도 초점은 논리적인 순서로 이동해야 하며, 각 콘텐츠는 시각적으로 명확히 구별할 수 있어야 합니다.
2.) 충분한 시간 제공
시간제한이 있는 콘텐츠는 될 수 있다면 포함하지 않는 것이 바람직하며 해당 종류의 콘텐츠가 반드시 필요할 경우 이를 회피할 수 있는 수단을 제공해야 합니다. 보안과 같은 이유로 사용자가 시간 조절이 필요한 콘텐츠를 이용해야 한다면, 시간 조절 기능을 사전에 충분한 시간을 두고 알려주어야 하며, 반응시간이 완료되기 전 이를 해제하거나 연장할 수 있는 수단을 제공해야 합니다.
3.) 광과민성 발작 예방
10인치 이상의 스크린을 사용하는 기기에서는 콘텐츠에 의한 광과민성 발작을 주의해야 합니다. 사용자가 깜빡이거나 번쩍이는 콘텐츠로 인해 발작을 일으키지 않도록, 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 제한적으로 사용됩니다.
4.) 쉬운 내비게이션
화면 낭독 프로그램을 이용하는 사람이 메뉴처럼 모든 웹 페이지에 공통으올 들어간 반복 영역을 계속해서 듣는 불편을 방지해야 합니다. 이때 사용자가 콘텐츠의 반복되는 영역은 건너띄고 바로 핵심 영역으로 이동할 수 있는 수단을 제공하는 것이 바람직합니다.
5.) 입력 방식
두 개 이상의 손가락을 동시에 사용해야 하는 인터랙션(예: 핀치 줌, 두 손가락 탭)또는 경로 기반 동작을 통한 입력(예: 스와이프, 그리기, 끌기와 놓기)으로 작동하는 모든 기능은 단일 포인터 입력으로도 조작할 수 있어야 합니다.또한, 단일 포인터 입력으로 실행되는 기능은 해당 입력이 실수로 실행되는 것을 방지하기 위해 중지 또는 취소할 수 있어야 합니다.
이해의 용이성
사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 콘텐츠를 이해할 수 있어야 합니다. 이 원칙은 가독성, 예측 가능성, 입력 도움이라는 3가지 지침으로 구성됩니다.
1.) 가독성
다국어를 지원하는 화면 낭독 프로그램을 사용하는 겨우, 텍스트 콘텐츠의 언어 정보를 프로그램으로 전달하여 정확한 발음으로 읽어주도록 제어하기도 합니다. 따라서 웹 페이지에서 주로 사용하는 언어를 기본 언어로 명확히 정의해야 합니다.
2.) 예측 가능성
입력이나 기능, 정보는 사용자가 예측할 수 있는 형태로 제공되는 것이 바람직합니다. 컨트롤 조작 또는 입력 시 사용자가 의도하지 않은 기능은 자동으로 실행되지 않아야 합니다. 특해 새 창, 파업창 등은 사용자가 인지하지 못한 상황에서 열리지 말아야 합니다. 그리고 담당자 상세 연락처, 연락 방법, 도움말 옵션 등 웹페이지에서 하나 이상의 도움 정보가 제공되는 경우, 정보는 각 페이지에서 동일한 순서로 접근할 수 있어야 합니다.
3.) 입력 도움
사용자 입력에는 근처에 사용법을 알려주는 레이블을 보조기술이 알 수 있도록 해당 컨트롤과 대응하여 제공해야 합니다. 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 하며, 입력 오류를 정정하는 방법도 함께 제공해야 합니다.
견고성
사용자는 기술에 영향을 받지 않고 원하는 콘텐츠를 이용할 수 있어야 합니다. 견고성 원칙은 문법 준수와 웹 애플리케이션 접근성의 2가지 지침으로 구성되어 있습니다.
1.) 문법 준수
마크업 오류 방지를 위해 마크업 언어로 작성된 콘텐츠는 해당 마크업 언어의 문법을 최대한 준수하여 제공해야 합니다. 특히 언어 요소의 여닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다.
2.) 웹 애플리케이션 접근성
콘텐츠 사용에 필요한 플러그인이나 웹 애플리케이션은 사용자가 웹페이지에 접근하여 사용하는 것을 방해하지 않아야 합니다. 특히 국내의 보조기술로 접근한 수 없는 웹 애플리케이션은 가능한 사용하지 않는 것이 좋으며, 반드시 사용해야 한다면 해당 웹 애프리케이션에 대한 대체수단을 함께 제공해야 합니다.
❗️🤔실제 사례: 많은 서비스들이 접근성을 위한 마크업에 많은 신경을 쓰고 있지만 쇼핑몰쪽에 아쉬움이 많이 있습니다. 결국 상품을 올리는 판매자가 여러 쇼핑몰에 올리는 편의를 위해 이미지를 만들어 여기저기 돌려쓰다보니 시각장애인은 상품 설명을 읽을수가 없습니다.
웹접근성을 준수한 대표적인 사이트 예시
1. 보건복지부
보건복지부에서는 시작장애인을 위한 음성 서비스 지원(별로 스크린 리더 프로그램 필요), 글자크기 확대 서비스, 모든 기능을 키보드로 이용 가능하도록 하는 등 웹 접근성 표준 지침을 준수함
2. 인터넷 우체국
인터넷 우체국은 고객이 직접 우체국을 방문하지 않고도 인터넷에 접속하여 택배, 국제특송, 쇼핑 등의 우편 서비스를 이용할 수 있도록 구축해 놓은 온라인 상 우체국인데 이동이 불편한 장애인 들에게는 무척 유용한 웹 사이트입니다. 해당 사이트 역시 '동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단(자막, 원고 또는 수화)제공, 모든 기능을 키보드로 이용 가능, 색상 이외 명암이나 패턴 등으로 콘텐츠를 구분할 수 있도록 하여 웹 접근성을 준수 하였습니다.
EBS 장애인서비스 대표 홈페이지
EBS 장애인 서비스는 중,고교 장애인 학생은 물론 평생 교육, 직업 교육 등 다양한 교육 방송을 제공 하고 있습니다. 장애인 웹 접근성 향상을 위해 수화 방송, 자막 방송, 화면해설 방송, 발달 장애인 방송, 교과서 듣기, 점역교재 다운로드 등을 제공합니다.
css
css란 무엇인가?
css는 사용자에게 문서를 표시하는 방법을 지정하는 언어-스타일, 레이아웃
css 선택자란?
css선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다.
| 선택자 종류 | 선택자 형태 | 선택자 예 |
|---|---|---|
| 전체 선택자 | * | * |
| 태그 선택자 | 태그 | h1 |
| 아이디 선택자 | #아이디 | #header |
| 클래스 선택자 | .클래스 | .item |
| 후손 선택자 | 선택자 선택자 | header h1 |
| 자손 선택자 | 선택자>선택자 | header>h1 |
| 속성 선택자 | 선택자[속성=값] | input[type=text] |
| 선택자[속성~=값] | div[data-role~=row] | |
| 선택자[속성 | =값] | |
| 선택자[속성^=값] | div[data-role^=row] | |
| 선택자[속성$=값] | div[data-role$=row] | |
| 선택자[속성*=값] | div[data-role*=row] | |
| 동위 선택자 | 선택자+선택자 | h1+div |
| 선택자~선택자 | h1~div | |
| 구조 선택자 | 선택자:first-child | li:first-child |
| 선택자:last-child | li:last-child | |
| 선택자:nth-child(수열) | li:nth-child(2n+1) | |
| 선택자:nth-last-child(수열) | li:nth-last-child(2n+1) | |
| 선택자:first-of-type | h1:fisrt-of-type | |
| 선택자:last-of-type | h1:last-of-type | |
| 선택자:nth-of-type(수열) | h1:nth-of-type(2n+1) | |
| 선택자:nth-last-of-type(수열) | h1:nth-last-of-type(2n+1) | |
| 반응 선택자 | 선택자:active | div:active |
| 선택자:hover | div:hover | |
| 상태 선택자 | :checked | input:checked |
| :focus | input:focus | |
| :enabled | input:enabled | |
| :disabled | input:disabled | |
| 링크 선택자 | :link | a:link |
| :visited | a:visited | |
| 문자 선택자 | ::first-letter | p::first-letter |
| ::first-line | p::first-line | |
| ::after | p::after | |
| ::before | p::before | |
| ::selection | p::selection | |
| 부정 선택자 | 선택자:not(선택자) | li:not(.item) |
전체 선택자
html 태그 안에 있는 모든 태그를 선택할 때는 전체 선택자를 사용합니다.
| 선택자 형태 | 설명 |
|---|---|
| * | html 페이지 내부의 모든 태그를 선택합니다. |
🤔전체 선택자 범위
일반적으로 전체 선택자를 사용하면 body태그 내부에 있는 요소만 스타일 속성이 적용되는 것처럼 보입니다. 그래서 전체 선택자 body태그 내부에 있는 모든 요소를 선택한다고 생각하기 쉬운데요. ❗️하지만 전체 선택자를 사용하면 html 태그를 포함해 head태그, title 태그, style 태그 까지 선택합니다.
태그 선택자
태그 선택자는 HTML 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하는 선택자 입니다.
| 선택자 형태 | 설명 |
|---|---|
| * | html 페이지 내부의 모든 태그를 선택합니다. |
🤔여러 개의 선택자 사용
여러 개의 선택자를 한꺼번에 선택해서 스타일 속성을 적용할 때는 쉼표를 사용합니다.
<style>
body,h1,p{
color:red;
}
</style>아이디 선택자와 클래스 선택자
아이디 선택자
아이디 선택자는 특정한 id속성을 가지고 있는 태그를 선택할 때 사용하는 선택자 입니다.
| 선택자 형태 | 설명 |
|---|---|
| #아이디 | 아이디 속성을 가지고 있는 태그를 선택합니다. |
❗️웹 표준엔 id속성은 웹 페이지 내부에서 중복되면 안된다라는 규정이 있으므로 아이디 선택자는 특정한 하나의 태그를 선택할 때 사용합니다.
🤔id 중복 속성
스타일시트에서는 id 중복 속성이 문제가 되지 않습니다. 하지만 자바스크립트는 id 속성이 중복될 경우 문제가 발생합니다.
document.getElementById('test').style.color="red";
/* 여러개의 test 아이디를 부여해도 하나의 아이디 밖에 적용이 안된다*/클래스 선택자
클래스 선택자는 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| .클래스 | 특정한 클래스를 가지고 있는 태그를 선택합니다. |
🤔여러 개의 클래스 선택자 사용
class 속성은 공백으로 구분해서 여러 클래스를 사용할 수 있습니다. 따라서 아래의 코드 같은 경우 두 개의 클래스를 함께 사용합니다.
<style>
.color {
color: red;
}
.size{
font-size: 50px;
}
</style>
</head>
<body>
<h1 class="color size">andy</h1>
</body>🤔태그 선택자와 클래스 선택자
id 속성은 웹 페이지 내부에서 중복되지 않으므로 상관없지만 class 속성은 중복될 수 있습니다. 만약 class 속성이 서로 다른 태그에 사용된다면 태그 선택자와 클래스 선택자를 함께 사용해 더 정확하게 태그를 선택할 수 있음.
<style>
h1.test{
color: red
}
</style>속성 선택자
속성 선택자를 사용하면 특정 속성을 가진 HTML 태그를 선택할 수 있습니다.
기본 속성 선택자
| 선택자 형태 | 설명 |
|---|---|
| 선택자[속성] | 특정한 속성이 있는 태그를 선택합니다. |
| 선택자[속성=값][속성=값] | 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다. |
<style>
input[type=text]{
background-color: red;
}
input[type=password]{
background-color: blue;
}
</style>🤔기본 속성과 속성 선택자
input 태그를 설명할 때 input 태그에 type 속성을 입력하지 않으면 자동으로 text 속성값을 적용한 형태로 출력된다고 이야기했습니다. 하지만 css는 html태그가 기본적으로 무엇을 출력하는지 관심을 갖지 않습니다.
문자열 속성 선택자
문자열 속성 선택자는 태그에 지정한 속성의 특정 문자열을 확인합니다.
|선택자 형태|설명|
|----|----|
|선택자[속성~=값]| 속성 안에 값이 특정 값을 단어로 포함하는 태그를 선택합니다.|
|선택자[속성|=값]| 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택합니다. |
|선택자[속성^=값]| 속성 안의 값이 특정 값으로 시작하는 태그를 선택합니다. |
|선택자[속성$=값]| 속성 안의 값이 특정 값으로 끝나는 태그를 선택합니다.|
|선택자[속성*=값]| 속성 안의 값이 특정 값을 포함하는 태그를 선택합니다.|
❗️선택자[속성~=값]과 선택자[속성|=값]의 설명이 같은데요, 하이픈(-)이 들어간 단어의 구분 방법이 다릅니다. 예를 들어 ko-kr 글자를 다음과 같이 인식합니다.
| 선택자 | 단어 인식 |
|---|---|
| 선택자[속성~=값] | ko-kr |
| 선택자[속성~=값] | ko와 kr |
<style>
img[src$=webp]{
border: 3px solid red;
}
</style>후손 선택자와 자손 선택자
후손 선택자와 자손 선택자는 특정 태그의 자손과 후손을 선택할 때 사용합니다.
❗️div 태그를 기준으로 바로 한 단계 아래에 위치한 태그를 자손이라 부르고 div 태그 아래에 위치한 모든 태그를 후손이라 부릅니다.
여러 개의 선택자를 함께 사용할 때 후손 선택자를 다음과 같이 사용하는 경우가 있습니다. 코드 3-16의 선택자는 어떤 태그에 빨간색을
후손 선택자
후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| 선택자 A 선택자 B | 선택자 A의 후손에 위치하는 선택자 B를 선택합니다. |
🤔여러 개의 후손 선택자와 관련된 주의 사항
<style>
/*id 속성값이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성에 red 키워드를 적용합니다. */
#header, h1, h2{color: red};
</style>선택자는 #header 태그의 후손에 위치하는 h1 태그를 선택하고 일반적인 h2태그를 선택합니다. 만약 #header 태그의 후손에 위치하는 h1 태그와 #header 태그의 후손에 위치하는 h2태그를 선택하고 싶다면 아래 코드처럼 사용해야 합니다.
<style>
/* id속성값이 header인 태그의 후손 위치에 있는 h1태그와
id속성값이 header인 태그의 후손 위치에 있는 h2 태그의
color 속성에 red 키워드를 적용합니다 */
#header h1, #header h2 {color: red}
</style>자손 선택자
자손 선택자는 특정 태그 아래에 있는 자손을 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| 선택자 A > 선택자 B | 선택자 A의 자손에 위치하는 선택자 B를 선택합니다. |
🤔table 태그와 자손 선택자 주의 사항
html 페이지의 계층 구조를 살펴보면 table 태그에 tbody 태그가 자동으로 추가된 것을 알 수 있습니다. 그러하여 table >tr >th 는 적용이 안되고 table>tbody>tr>th 선택자를 사용해야 스타일을 적용할 수 있다.
동위 선택자
동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| 선택자 A + 선택자 B | 선택자 A 바로 뒤에 위치하는 선택자 B를 선택합니다. |
| 선택자 A ~ 선택자 B | 선택자 A 뒤에 위치하는 선택자 B를 선택합니다. |
반응 선택자
반응 선택자는 사용자의 반응으로 생성하는 특정한 상태를 선택하는 선택자입니다. 사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고 클릭하면 active 상태가 적용됩니다.
|선택자 형태 |설명|
|----|----|
|:active| 사용자가 마우스로 클릭한 태그를 선택합니다.
|:hover| 사용자가 마우스를 올린 태그를 선택합니다.
상태 선택자
상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| :checked | 체크 상태의 input 태그를 선택합니다. |
| :focus | 초점이 맞추어진 input 태그를 선택합니다. |
| :enabled | 사용 가능한 input 태그를 선택합니다. |
| :disabled | 사용 불가능한 input 태그를 선택합니다. |
구조 선택자
일반 구조 선택자는 특정한 위치에 있는 태그를 선택하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| :first-child | 형제 관계 중에서 첫 번째에 위치하는 태그를 선택합니다. |
| :last-child | 형제 관계 중에서 마지막에 위치하는 태그를 선택합니다. |
| :nth-child(수열) | 형제 관계 중에서 앞에서 수열 번째에 태그를 선택합니다. |
| :nth-last-child(수열) | 형제 관계 중에서 뒤에서 수업 번째에 태그를 선택합니다. |
🤔구조 선택자와 관련된 주의 사항
<style>
/*첫 번째 li태그의 a태그를 선택하는 것 */
li:first-child>a{
color: red;
}
/*li 태그의 첫번째 자손에 위치하는 a를 택하여 모두 선택*/
li >a:first-child{
color: red;
}
</style>형태 구조 선택자
형태 구조 선택자는 일반 구조 선택자와 비슷하지만 태그 형태를 구분합니다.
| 선택자 형태 | 설명 |
|---|---|
| :first-of-type | 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택합니다. |
| :last-of-type | 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택합니다. |
| :nth-of-type(수열) | 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택합니다. |
| :nth-last-of-type(수열) | 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그를 선택합니다. |
문자 선택자
문자 가상 요소 선택자는 태그 내부 특정 조건의 문자를 선택하는 선택자입니다. 문자 선택자는 가상 요소 선택자로 ::기호를 사용가는 것이 표준이지만 : 기호를 사용해도 정상 작동합니다.
시작 문자 선택자
시작 문자 선택자는 태그 내부의 첫 번째 글자와 첫 번째 줄을 선택할 때 사용하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| ::first-letter | 첫 번째 글자를 선택합니다. |
| ::fisrt-line | 첫 번째 줄을 선택합니다. |
전후 문자 선택자
전후 문자 선택자는 특정 태그의 전후에 위치하는 공간을 선택하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| ::after | 태그 뒤에 위치하는 공간을 선택합니다. |
| ::before | 태그 앞에 위치하는 공간을 선택합니다. |
반응 문자 선택자
반은 문자 선택자는 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| ::selection | 사용자가 드래그한 글자를 선택합니다. |
링크 선택자
링크 선택자는 href 속성을 가지고 있는 a태그에 적용되는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| :link | href속성을 가지고 있는 a태그를 선택합니다. |
| :visited | 방문했던 링크를 가지고 잇는 a태그를 선택합니다. |
부정 선택자
부정 선택자는 지금까지 배운 선택자를 모두 반대로 적용할 수 있게 만드는 선택자입니다.
| 선택자 형태 | 설명 |
|---|---|
| :not(선택자) | 선택자를 반대로 적용합니다. |
❗️선택자 우선순위
선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다.
그 기준은 다음과 같습니다.
1. 점수가 높은 선언이 우선함
2. 점수가 같으면, 가장 마지막에 해석된(작성된) 선언이 우선함
!important (우선순위가 제일 높음)
<style>
color: red !important
</style>인라인 선언 방식(1000점)
<div>
<p style="color: red;">Contents</p>
</div>id선택자(100점)
<style>
#name{
color:red;
}
</style>class선택자(10점)
<style>
.name{
color: red;
}
</style>태그 선택자(1점)
<style>
p{
color:red;
}
</style>전체 선택자(0점)
<style>
*{
color: red;
}
</style>부정 선택자(0점)
<style>
:not(p){
color: red;
}
</style>점수 매기기 연습
.list li.item
이 선택자는 list클래스의 하위 요소인 li중 클래스 이름이 item인 요소를 가리킵니다.
점수는 클래스 + 태그 + 클래스 = 10+1+10 =21점
.list li:hover
이 선택자는 list클래스의 하위 요소인 li가상 클래스 hover를 부여한 요소를 가리킵니다. ❗️이때 가상 클래스 hover도 클래스와 동일한 점수를 가집니다.
점수는 클래스+태그+클래스 =10+1+10=21점
.box::before
이 선택자는 box 클래스에 가상 요소 before을 가리킵니다.
❗️일반적으로 요소는 태그로 취급하여 태그와 동일한 점수를 가집니다.
점수는 클래스+ 태그 =10+1 =11점
#submit span
이 선택자는 id가 submit인 요소의 하위 요소중 span 태그를 가리킵니다.
점수는 id+태그=100+1 =101점
header .menu li:nth-child(2)
이 선택자는 header태그의 하위 요소이면서, menu 클래스의 하위 요소 중 li태그의 가상 클래스 nth-child를 가리킵니다.
❗️nth-child 역시 가상 클래스이기 때문에 클래스와 동일한 점수를 가집니다.
점수는 태그+클래스+태그+클래스=22점
:not(.box)
부전 선택자는 점수로 계산하지 않습니다. 즉 0점이라고 계산해고 무방합니다.
점수는 부정+클래스 =0 +10=10점
CSS3 단위
크기 단위
css3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px입니다. 이 중에서 자주 사용하는 것은 아래 표로 정리 했습니다.
| 단위 | 설명 |
|---|---|
| % | 백분율 단위 |
| em | 배수 단위 |
| px | 픽셀 |
첫 번째로 알아볼 크기 단위는 퍼세트 단위입니다. 퍼센트 단위는 기본 설정된 크기에서 상대적으로 크기를 지정합니다. ❗️참고로 100%가 초기에 설정된 크기입니다.
<style>
.first{
font-size: 100%;
}
.second{
font-size: 150%;
}
.third{
font-size: 200%;
}
</style>두 번째로 알아볼 크기 단위는 em단위입니다. em 단위는 배수를 나타내는 단위입니다. 1배=1em=100% 이다.
<style>
.first{
font-size: 1em;
}
.second{
font-size: 1.5em;
}
.third{
font-size: 2em;
}
</style>%, em 단위는 모두 상대적으로 크기를 지정했다면 이와 반대로 절대적으로 크기를 지정할때는 px단위를 사용합니다.
<style>
.first{
font-size: 100px;
}
.second{
font-size: 150px;
}
.third{
font-size: 200px;
}
</style>🤔크기 단위의 복합 사용
<style>
*{
font-size:12px ;
}
h1{
font-size: 3.0em;
}
h2{
font-size: 1.5em;
}
</style>❗️전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법은 굉장히 많이 사용되니 꼭 기억하기!
색상 단위
| 단위 형태 | 설명 |
|---|---|
| #000000 | HEX 코드 단위 |
| rgb(red, green, blue) | RGB 색상 단위 |
| rgba(red, green, blue, alpha) | RGBA 색상단위 |
| hsl(hue(색상), saturation(채도), lightness(명도)) | HSL 색상단위 |
| hsla(hue, saturation, lightness, alpha) | HSLA 색상 단위 |
🤔알파 값
위에서 alpha는 투명도를 말한다. 0.0 부터 1.0 사이의 숫자를 입력한다. 0.0은 완전히 투명한 상태를 말하고 1.0은 완전히 불투명한 상태를 말함
<!--RGB 색상 단위-->
<style>
color: rgba(255, 255, 100, 1.0);
</style>
<!--HEX 코드 색상 단위-->
<style>
color: #0094FF;
</style>
<!--HSL 색상 단위-->
<style>
color: hsl(33, 100%, 50%);
</style>URL 단위
<!--URL 단위-->
<style>
background-image: url(IMG/javascript-closure.png);
</style>가시 속성
가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성이다.
display 속성
| 키워드 이름 | 설명 |
|---|---|
| none | 태그를 화면에서 보이지 않게 만듭니다. |
| block | 태그를 block 형식으로 지정합니다. |
| inline | 태그를 inline 형식으로 지정합니다. |
| inline-block | 태그를 inline-block 형식으로 지정합니다. |
🤔inline vs inline-block
❗️inline 키워드를 적용한 코드는 width 속성과 height 속성이 적용되지 않습니다. 또한 margin 속성이 div 태그의 좌우로만 지정된다.
❗️inline-block 는 width 속성과 height속성을 적용할 수 있다 또한 margin 속성이 상하좌우로 적용 가능하다.
❗️block 형식도 width 속성과 height 속성, margin 속성을 적용할 수 있다.
visibility 속성
visibility 속성은 대상을 보이거나 보이지 않게 지정하는 스타일 속성이다.
|키워드 이름 |설명|
|----|----|
|visible|태그를 보이게 만듭니다.
|hidden|태그를 보이지 않게 만듭니다.
|collapse|table 태그를 보이지 않게 만듭니다.
🤔display:none vs visibility:hidden 의 차이
❗️display 속성을 사용하면 태그가 화면에서 제거되지만 visibility 속성을 사용하면 화면에서 보이지 않을 뿐입니다.
opacity 속성
opacity 속성은 태그의 투명도를 조절하는 스타일 속성입니다. 0.1부터 1.0 사이의 숫자를 입력할 수 있으며 0.0은 투명한 상태를 나타내고 1.0은 불투명한 상태를 나타냅니다.
<style>
opacity: 0.2;
</style>❗️박스 속성
width 속성과 height속성
width 속성과 height속성은 글자를 감싸는 영역의 크기를 지정하는 스타일 속성
<style>
width:100px;
height:100px;
</style>margin 속성과 padding속성
<!--4개의 값을 적용할때-->
margin/padding:top->right->bottom->left
<!--2개의 값을 적용할때-->
margin/padding:top/bottom->right/left❗️전체 너비 =width+2x(margin+border+padding)
❗️전체 높이 =height+2x(margin+border+padding)
box-sizing 속성
이전에 width 속성과 height 속성은 글자를 감싸는 영역의 크기를 지정하는 스타일 속성이라고 이야기했습니다. box-sizing 속성은 이러한 공식을 변경할 수 있는 css3 속성입니다.
content-box
<style>
box-sizing: content-box;
</style>content-box키워드는 기본으로 적용되는 키워드입니다. content-box 키워드를 적용하면 width 속성과 height 속성이 글자가 들어가는 영역의 크기를 지정하게 만듭니다.
❗️박스 너비=width 속성 +2x(margin 속성 +border 속성+padding 속성)
❗️박스 높이=height 속성 +2x(margin 속성+border 속성+padding 속성)
border-box
<style>
box-sizing: border-box;
</style>border-box 키워드는 width 속성과 height 속성이 테두리를 포함한 영역의 크기를 지정하게 만듭니다.
❗️박스 너비=width 속성 +2 x margin 속성
❗️박스 높이=height 속성+2 x margin 속성
테두리 속성
border-width/style/color 속성
<style>
.box{
border-width:10px
border-style:dahsed;
border-color: black
}
/*동일하다*/
.box{
border:10px dashed black
}
</style>border-radius 속성
border-radius 속성을 사용하면 테두리가 둥근 사각형 또는 원을 만들 수 있습니다.
<style>
/*윈쪽 위->오른쪽 위->오른쪽 아래->왼쪽 아래*/
border-radius:10px 10px 10px 10px
</style>배경 속성
background-image 속성
배경에 넣을 그림을 지정하는 스타일을 속성입니다.
<style>
background-image: url(IMG/javascript-closure.png);
</style>background-size 속성
background-size 속성은 1개 또는 2개의 크기 단위를 적용하며 각각 너비와 높이를 의미합니다.
<style>
background-size: 100% 50%;
</style>❗️background-size 속성에 숫자를 띄어쓰기로 구분하는 것과 쉼표로 구분하는 것은 다릅니다. 쉼표를 사용하면 각각의 배경에 서로 다른 크기를 적용합니다.
<style>
/* 하나의 파일은 너비가 100px로 적용되고 나머지 하나의 파일은 너비가 200px로 적용된다.*/
background-image: url(IMG/javascript-closure.png), url(IMG/Callback-Function-JavaScript.jpeg);
background-size: 100px, 200px;
</style>🤔background-size 속성의 키워드
background-size 속성에는 contain 키워드와 cover 키워드를 적용할 수 있습니다.
1.) contain 키워드는 너비를 100%로 적용한 것과 같은 결과를 보여준다
2.) cover 키워드는 높이를 100%로 적용한 것과 같은 결과를 보여준다.
background-repeat 속성
repeat 키워드를 적용하면 이미지가 패턴을 이루고 repeat-x 키워드를 적용하면 x축 방향으로 이미지가 반복, repeat-y를 적용하면 y축 방향으로 이미지가 반복
<style>
/*반복 없는 속성*/
background-repeat:no-repeat;
</style>background-attachment 속성
background-attachment 속성의 기본 키워드는 scroll 키워드입니다. scroll 키워드는 화면 스크롤에 따라 배경 이미지가 함께 이동한다는 것을 적용합니다.
<style>
/*스크롤을 해도 배경 이미지가 고정됩니다.*/
background-attachment: fixed;
</style>background-position 속성
background-position: 키워드
background-position: X축 크기
background-position: X축 크기, Y축 크기
폰트 속성
font-size 속성
font-size 속성은 글자의 크기를 지정하는 스타일 속성입니다. font-size 속성에서는 크기 단위 또는 다양한 키워드를 사용합니다.
<style>
font_size: 32px;
font-size: large;
font-size: small
</style> 🤔참고로 h1 태그의 기본 크기는 32픽셀이고 p태그의 기본 크기는 16픽셀 입니다.
font-family 속성
font-family 속성은 폰트를 지정하는 스타일 속성입니다. ❗️일반적으로 한 단어로 이루어진 폰트는 따옴표를 사용하지 않습니다. 하지만 두 단어 이상으로 이루어지는 단어는 따옴표를 반드시 사용해야 합니다.
font-family: Arial;
font-family: 'Times New Roman';❗️그런데 폰트를 적용할 때는 몇 가지 주의해야 할 점이 있습니다. 개발하고 있는 우리의 컴퓨터에는 설치되어 있지만 우리가 개발한 웹 페이지를 사용할 사용자에게는 폰트가 설치되어 있지 않을 수 있습니다. 일반적으로 이러한 문제를 예방하고자 여러개의 font-family 속성을 사용합니다.
❗️하지만 다국어 웹 페이지를 제공할 경우 사용자에게 무슨 폰트가 있는지 일일이 확인할 수 없습니다. 이러한 문제를 해결하고자 font-family 속성의 가장 마지막 폰트에는 Serif폰트(명조체), Sans-serif폰트(고딕체),Mono space폰트(고정폭 글꼴)를 적용합니다.
❗️❗️이 폰트는 웹 브라우저에서 지정하는 폰트로 generic-family 폰트라고 부릅니다
<style>
font-fmaily: sans-serif;
font-family: serif;
</style>font-style 속성과 font-weight 속성
font-style 속성과 font-weight 속성은 폰트의 기울기 또는 두께를 조정하는 스타일 속성입니다.
<style>
font-style: italic;
font-weight: bold;
</style>❗️ 참고로 일반 폰트의 두께는 400이고 두꺼운 폰트의 두께는 700 입니다. 또한 두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조절할 수 있다.
line-height 속성
line-height 속성은 글자의 높이를 지정합니다. 현대의 html 페이지는 문서 형태보다 애플리케이션 형태로 사용하므로 글자의 높이를 지정하는 기능보다 글자를 수직 중앙 정렬할 때 사용합니다.
css는 block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일 속성이 없습니다. 따라서 대체 방안으로 line-height 속성을 사용합니다.
<style>
displaly:block;
line-height:70px;
</style>text-align 속성
글자의 정렬과 관련된 속성이다
🤔test-align 속성과 영역
❗️ span 태그의 text-align 속성이 사용되지 않습니다. 이유는 span 태그는 inline 형식을 가지므로 너비가 존재하지 않습니다. 따라서 중앙이라는 개념이 없으므로 text-align 속성을 사용할 수 없습니다.
text-decoration 속성
<style>
text-decoration: none;
</style>text-decoration 속성으로는 밑줄만 제거되며 색상은 color 속성을 사용해 별도로 적용해야 합니다.
위치 속성
프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정합니다.
절대 위치 좌표: 요소의 x좌표와 y좌표를 설정해 절대 위치를 지정합니다.
상대 위치 좌표: 요소를 입력한 순서를 통해 상대적으로 위치를 지정합니다.
position 속성
HTML 태그의 위치 설정 방법을 변경 할 때는 position 속성을 사용합니다.
| 키워드 | 설명 |
|---|---|
| static | 태그가 위에서 아래로 순서대로 배치됩니다. |
| relative | 초기 위치 상태에서 상하좌우로 위치를 이동합니다. |
| absolute | 절대 위치 좌표를 설정합니다 |
| fixed | 화면을 기준으로 절대 위치 좌표를 설정합니다. |
❗️box 클래스가 있는 div 태그의 postion 속성에 absolute 키워드를 적용하면 브라우저에 따라서 다른 실행 결과를 보여줍니다.
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
</style>🤔 보통 chrome에서는 맨 마지막 box인 노란색 박스가 출력됩니다.
z-index 속성
z-index 속성에는 숫자를 적용하며 숫자가 클수록 앞에 위치합니다.
<style>
z-index:10;
z-index:5;
z-index:1;
</style>위치 속성과 관련된 속성
❗️이것은 굉장히 중요한 내용입니다. position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다. 따라서 자손의 position 속성에 absolute 키워드를 적용할 경우는 부모 태그에 몇 가지 처리를 해야 합니다.
1.) 자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용합니다.
❗️❗️2.) 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드를 적용 합니다.
overflow 속성
overflow 속성은 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성입니다.
| 키워드 이름 | 설명 |
|---|---|
| hidden | 영역을 벗어나는 부분을 보이지 않게 만듭니다. |
| scroll | 영역을 벗어나는 부분을 스크롤로 만듭니다. |
<style>
overflow: hidden;
overflow: scroll;
</style>float속성
| 키워드 | 설명 |
|---|---|
| left | 태그를 왼쪽에 붙입니다. |
| right | 태그를 오른쪽에 붙입니다. |
처음 float속성을 개발할때는 img 태그에 사용하는 것을 기본으로 했습니다. float속성을 사용하면 그림을 글자 위에 띄울수 있습니다.
❗️float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다. float속성을 사용해 수평 정렬할 때는 주의할 점이 있습니다.❗️첫 번째에 위치한 div태그가 오른쪽에 붙고 두 번째에 위치한 div태그가 오른쪽에 이어서 붙은 것입니다.
float 속성을 사용한 레이아웃 구성
❗️자손에 float속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다.
<style>
/* body 태그를 중앙 정렬합니다 */
body{
width: 960px;
margin: 0 auto;
}
</style><style>
body{
width: 960px;
margin: 0 auto;
}
#aside{
float: left;
width: 200px;
}
#section{
float: left;
width: 760px;
}
#wrap{
overflow: hidden;
}
</style>
😢img 태그에 float속성을 사용해 이미지가 부유했던 것처럼 #footer 태그의 글자 위에 #wrap 태그 내부의 요소가 부유하는 현상이 발생합니다.
float 속성을 사용한 태그의 부모에 overflow 속성을 사용하고 hidden 키워드를 적용해야먄 위와 같은 화면을 만들 수 있습니다.
❗️이러한 방법을 One True Layout 방식이라고 부릅니다.
clear:both를 사용한 레이아웃
clear:both 를 사용하면 float으로 일그러진 레이아웃을 쉽게 초기화할 수 있습니다.
<style>
.clear{
clear:both;
}
</style>
<div class="section"></div>
<div class="aside"></div>
<div class="clear"></div>