![]()
box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..
![]()
role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시
![]()
미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 ..
![]()
flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: ..
![]()
flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..
![]()
flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..
![]()
float 속성 정리 1. float 속성 - 요소를 정렬하기 위한 속성 2. float의 속성값 용어 설명 none 띄우지 않음 (기본값) left 왼쪽에 띄움 right 오른쪽에 띄움 initial 기본값으로 설정 inherit 부모 요소로부터 상속 .red { width: 100px; height: 100px; background-color: red; float: left;/* 박스를 왼쪽에 정렬함 */ } .blue { width: 100px; height: 100px; background-color: blue; float : right;/* 박스를 오른쪽에 정렬함 */ }
![]()
트랜지션 (Transition) 속성 정리 1. 트랜지션 (백과사전 바로가기) - 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것 2. 트랜지션의 유형 속성 설명 transition-property 트랜지션 대상을 설정 transition-duration 트랜지션 진행 시간을 설정 transition-timing-function 트랜지션 속도 곡선을 설정 transition-delay 트랜지션 지연 시간을 설정 transtion 위 4가지의 속성을 한꺼번에 설정 3. 연습문제 .tr1 { width: 100px; height: 100px; background-color: blue; border: 1px solid black; /* 너비를 2초 동안, 높이를 ..
![]()
가상 요소 1. 가상 요소 - 내용의 일부만 선택해 스타일을 적용할 때 사용함 - 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙임 2. ::first-line 요소와 ::first-letter 요소 - ::first-line 요소 : 첫 번째 줄에 스타일 적용 - ::first-letter 요소 : 첫 번째 글자에 스타일 적용 ※ br 태그로 글을 나눌 수 있음 걱정도 별을 둘 나는 계십니다. 나는 무덤 새워 이런 버리었습니다. p::first-line { background-color: lightseagreen; } p::first-letter { background-color: lightcoral; } 3. ::before 요소와 ::after 요소 - 내용의 앞뒤에 콘텐츠 ..
![]()
테이블 관련 태그 정리 1. 표 만드는 태그 (백과사전 바로가기) - , , , 태그 : 기본적인 표를 제작 - 태그 : 표의 기본 틀을 제작 - 태그 : 행을 제작 - 태그 : 셀(열)을 제작 - 태그 : 표의 제목 셀을 제작 제목 셀 1행 2열 1핼 3열 제목 셀 2행 2열 2행 3열 2. colspan, rowspan 속성 - 행 or 열 합치기 - colspan 속성 : 가로로 합침 - rowspan 속성 : 세로로 합침 이름 연락처 주소 자기소개 3. 표에 제목 붙이기 - 태그일 경우, 제목 타이틀 소 제목 타이틀 이름 연락처 주소 자기소개 - 태그일 경우, 제목 타이틀 소제목 이름 연락처 주소 자기소개
![]()
주요 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용 - * (별표)를 사용 HTML5 웹 프로그래밍 h1 {background-color: lightseagreen;} /* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/ * { margin: 0; padding: 0; } 2. 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일을 적용 제목 타이틀 소제목 타이틀1 내용내용내용내용내용내용내용.... 소제목 타이틀2 내용내용내용내용내용내용내용.... h2 {color: blue;} /* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */ p { font-size: 12px; margin-left: 20px; } 3. 클래스 선택자 - 특정 부분에 스타일..
![]()
주석처리 1. HTML의 주석처리 - 로 주석처리함 2. CSS의 주석처리 - /* */ 로 주석처리함 3. Javascript의 주석처리 - // 로 주석처리함
![]()
position 속성 정리 1. position 속성 정리 (백과사전 바로가기) - 요소의 위치 형식을 지정 - position의 종류는 4가지가 존재 - absolute - fixed - relative - static 2. absolute - 절대 위치 좌표 설정 - 문서의 흐름과 관계없이 top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치 /* 박스의 크기 설정 */ .box { position: absolute; width: 100px; height: 100px; background-color: #0094ff; } /* position 설정 */ #crd1{top: 0; left: 0;} #crd2{top: 0; right: 0;} #crd3{bottom: 0..
![]()
노멀라이즈 (Normalize) 1. 노멀라이즈 - HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하기 위해 적용시킴 2. a 태그의 노멀라이즈 - 기본일 때, 밑줄이 있고 색이 파랑색임 (링크로 바로가기) - 노멀라이즈 적용 시, 밑줄과 색이 바뀜 ※ inherit : 부모의 스타일을 적용 링크로 바로가기 3. body의 노멀라이즈 - 기본일 때, 약간의 margin이 들어감 Hello!!! - 노멀라이즈 적용 시, magin이 사라짐 Hello!!! 4. ul, li의 노멀라이즈 - 기본일 때, 점과 여백이 있음 메뉴 아이템 1 메뉴 아이템 2 메뉴 아이템 3 - 노멀라이즈 적용 시, 점과 여백이 사라짐 메뉴 아이템1 메뉴 아이템2 메뉴 아이템3
![]()
요소 가운데 정렬 1. 요소 가운데 정렬 - margin: 0 auto; 라고 입력하면, 요소가 가운데로 정렬됨
