23.05.24 학습일기
✅ CSS 적용 우선순위!important StyleInline StyleID Selector StyleClass Selector StyleTag Selector Style중복된 선택자가 있는 경우 외부스타일 CSS우선순위내부파일 Style> 외부파일 Style중복된 선택자가 있는 경우 내부스타일 CSS우선순위!important > Inline > ID Selector > Class Selector> Tag Selector예시)h1{ color : red !important; }css는 작성순서 관계 x✅ CSS 서식관련 속성(텍스트 스타일)- css 기본 default 값font size : 16px, 1em, 100%, 12pt- colorrgba에서 a는 투명도예시 ) rgba(0,0,0,0.5)- text-transform 텍스트 대소문자 변환예시)text-transform : capitalize; // 단어의 첫 글자를 강제로 대문자로 변경text-transform : uppercase; //전부 대문자로text-transform : lowercase; //전부 소문자로- text-align 문자 정렬 방법 지정- line-height(줄간격)일반적으로 body태그에 넣어 사용 em단위로 사용 왜? 상대적으로 적용하기 위해✅ CSS 서식관련 속성(목록 스타일) ⭐css 가상 클래스 :before를 이용해 원하는 기호를 사용할 수 있다 -> 불릿아이콘을 사용예시 ).menu li::before{ /*ㅁ+한자키 : 불릿아이콘사용 or 폰트어썸에서 가져와 사용가능*/ content:'★'; }- ul태그 속성disc, circle, square, none- ol태그 속성decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alphaCSS 자손선택자 vs 자식선택자HTML 부모요소 vs 자식요소부모요소 vs 자식요소CSS 자손선택자(스페이스) vs 자식선택자(>)index.html <body> <div class="box"> <div> <div></div> </div> </div> </body> </html>style.css /*스페이스 : 자손선택자, >는 자식선택자(바로 아래)*/ .box{ border:1px solid red; width:400px; height: 400px; } .box > div{ border:1px solid blue; width:200px; height: 200px; } .box > div div { width:50px; height:50px; background-color: black; }✅ 상세 디자인을 위한 CSS 박스모델(border, border-radius)html은 네모난 박스와 같은 상하좌우를 가짐border-style : solid/dashed/dotted 세가지 가장 많이 사용border-width : px가장 많이 사용✅ 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)box-sizing ⭐⭐ (레이아웃 지정시 매우 중요!!) 최초에 정한 너비와 높이를 유지하는 것왜? border나 padding, marign에 의해 크기가 커지는 것을 box-sizing : border-box 가 방지해줌최초에 정한 width, heigth가 있을 때,그 다음에 준 border, margin, padding에 의해 늘어나는 것을 방지정리 > 최초의 너비값과 높이값을 유지한 채 padding, border를 그 안에 심어라✅ 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)box-shadow : 박스에 주는 그림자[필수속성]offset-x : 수평 그림자의 offset값(+ : 왼쪽에서 오른쪽으로)offset-y : 수직 그림자 offset값(+ : 위에서 아래로)blur : 그림자 가장자리를 부드럽게 처리하는 정도color : 색상 지정예시)index.html <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> </body>style.css div{ background-color: #ccc; width:250px; height:200px; margin:10px; border-radius: 5px; float : left; } .box1{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 5px 5px 20px rgba(0, 0, 0, 0.463); } .box2{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 0 0 20px rgba(30, 144, 255); } .box3{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 10px 10px crimson; } .box4{ /*box-shadow : (inset : 안쪽쉐도우) x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : inset 0 0 20px rgba(0, 0, 0, 0.26) } .box5{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : inset 0 0 20px rgba(255, 255, 255, 0.9) }text-shadow : 텍스트에 주는 그림자index.html <body> <h1 class="heading">Coding Works Class</h1> </body>style.css body{ background-color: #333; } /* text-shadow에서는 inset이 없음 */ .heading{ font-size: 100px; text-transform: uppercase; color: gold; /* text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); */ text-shadow: 5px 5px dodgerblue, 10px 10px 0 #90c8ff; }퍼블리싱의 모든 것! ✅ HTML 인라인요소, 블록요소, 인라인블록인라인(inline)요소블록(block)요소인라인블록(inline-block)요소- 인라인요소✔ 한줄에 여러개 배치✔ 기본 너비 값은 컨텐츠의 너비값✔ 크기 값을 가질 수 없음 : width, height를 줘도 작동하지 않음을 의미✔ 상하 마진은 가질 수 없음인라인요소span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio - 블록요소✔ 한줄에 한개만 배치✔ 기본 너비 값은 100%✔ 크기 값을 가질 수 있음✔ 상하좌우 마진 가질 수 있음블록요소div, table, figure, figcaption, caption, header, nav, footer, section, article, asice, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6 특징전체적으로 레이아웃을 잡는 태그- 인라인 블록요소✔ 한줄에 여러개 배치✔ 기본 너비값은 컨텐츠의 너비값✔ 크기 값을 가질 수 있음✔ 상하 마진은 가질 수 있음인라인 블록 요소img, input태그들, button, fontawesome예시)[ 문제상황 1]상하간격 너무 좁아 margin-top을 주려고 하니 먹지 않음 왜? 인라인요소 이기 때문 이러한 3가지 요소를 변경해주는 방법 => display 속성display속성에 주로 사용하는 값block, inline-block, inline, none, flex✅ CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)1. 엘리먼트 수평 정렬하기 (속성 : float)float 속성float 속성none(default) : float속성 적용 안함inline, block, inline-block관계없이 적용 가능left : 요소가 컨테이너 왼쪽 배치right : 요소가 컨테이너의 오른쪽 배치margin : auto 요소를 중앙에 배치(inline요소는 적용되지 않음, 반드시 block요소만 적용) [ 문제상황 1 ]부모요소는 자식요소의 높이 만큼 자동으로 늘어나지만float : left 로 주게되면부모요소는 자식요소가 없다고 판단해 높이값을 잃음[ 해결방법 ]부모요소에 높이값 주는방법heigth : 200px; //자식 요소의 높이 값이 변경되면 이것도 바꿔 줘야 함overflow : hidden; //자식요소의 높이 값의 변화에 따라 높이 값이 변경됨자식요소에 float가 있으면 부모요소의 높이값을 찾아줘야함 -> overflow:hiddenfloat성질자식 요소에 float성질을 주면 부모 요소는 높이 값을 잃는다높이 값을 찾아주는 방법height지정(단, 자식 요소의 높이 변경 시 변경 해줘야 함)overflow : hiddeninline, inline-block인 경우 margin-auto 사용 불가이땐 부모 요소에 text-align:center사용(자식요소의 inline요소는 중앙정렬)float 속성 적용되면 다음 요소가 float속성을 상속받음 -> clear속성으로 해제left : 왼쪽 배치된 float속성 상속 해지right : 오른쪽으로 배치된 float속성 상속 해지both : 왼쪽 또는 오른쪽으로 배치된 모든 float속성 상속 해지예시)index.html <body> <div class="parent"> <div class="top">float : none</div> <div class="left">float : left</div> <div class="right">float : right</div> <div class="clear">clear : both</div> </div> </body>style.css .parent{ border : 5px solid red; width : 600px; } .top{ background-color: purple; height:50px; } .left{ background-color: grey; height:100px; width: 200px; float:left; } .right{ background-color: orange; height:100px; width:400px; float: right; } .clear{ background-color: purple; height: 50px; clear:both; /*앞에 있는 float속성을 다음요소가 상속받는데 이것을 해제해주는 역할*/ }[중요] 명심!⭐⭐⭐inline 요소 중앙정렬 방법 : 부모 요소에 text-algin:center;block 요소 중앙정렬 방법 : 자기 자신에게 margin:auto;✅ 가로 배치하는 2가지 방법1. float와 overflow를 사용해 배치(px 정확히 맞춰야함)예시)index.html <body> <section> <article>article</article> <article>article</article> <article>article</article> </section> </body>style.css section{ border:5px solid black; width: 600px; overflow:hidden; /*2. 부모요소의 크기를 보장해주기 위해 사용*/ } section article{ background-color: gold; width:200px; height:100px; float:left; /*1. float하면 부모요소는 자식요소가 없다고 판단해 크기가 작아짐*/ border:1px solid red; box-sizing: border-box; /*3. 크기가 맞지않아 한줄로 가로정렬 불가, 이걸 적용하면 해결 가능*/ }2. display : inline-block으로 배치예시)index.html <body> <section> <article>article</article> <article>article</article> <article>article</article> </section> </body>style.css section{ border : 5px solid black; text-align: center;/*2. 가운데 정렬하기 위해 부모요소에 지정*/ } section article{ background-color: gold; width:200px; height:100px; border:1px solid red; display:inline-block; /*1. inline요소는 margin:auto불가*/ } article은 블록요소 (세로배치됨) -> width:100%❓ 가로 배치 하는 방법?inline로 변경 => 가로 배치는 되나 width값을 가지지 못함inline-block => 가로 배치 되면서 width값을 가짐❓ 가운데 정렬 하는 방법?본인 선택자에 margin:auto불가왜? 블록만 가능❓ 그렇다면 inline은??부모 요소에 text-align: center설정선택시 고려사항크기를 정확히 맞춰야 한다? => float사용보기 좋게만 가운데 정렬하면 된다 => display:inline-block;
