[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (2)

웹 퍼블리싱/[codeit] 웹 퍼블리싱 (완)

[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (2)

web_seul 2021. 5. 29. 14:40

CSS 제대로 활용하기

1강. 선택자 정리

//태그이름
h1 {color: orange;}

//클래스,아이디
.important {color: orange;}
#favorite {color: blue;}

//자식
.div1 i {color: orange;}

//직속자식
.div1 > i {color: orange;}

//복수선택
.two, .four {color: orange;}

//여러조건
.outside.one {color: blue;}

//가상클래스(pseudo-class)
.div1 p:nth-child(3) {color: blue;} //.div1의 자식인 <p> 태그 중 3번째
.div1 p:first-child {color: red;} //.div1의 자식인 <p> 태그 중 첫 번째
.div1 p:last-child {color: green;} //.div1의 자식인 <p> 태그 중 마지막
.div1 p:not(:last-child) {font-size: 150%;} //.div1의 자식 중 마지막 자식이 아닌 <p> 태그
.div1 p:not(:first-child) {text-decoration: line-through;} //.div1의 자식 중 첫 번째 자식이 아닌 <p> 태그

//마우스오버
h1:hover {color: green;}

//하위요소 전체
.div *{border: 1px solid red;}

2강. 마우스 오버 버튼

//버튼에 '로그인' 텍스트가 보여짐
<input type="submit" value="로그인" class="submit-btn">

3강. CSS 상속

상속되는 속성들

color
font-family
font-size
font-weight
line-height
list-style
text-align
visibility

4강. CSS 우선순위

순서 : 후에 나온 스타일이 적용

명시도

인라인 스타일이 가장 우선 순위가 높습니다.
선택자에 id가 많을 수록 우선 순위가 높습니다.
선택자에 class, attribute(a href), pseudo-class가 많을 수록 우선 순위가 높습니다.
그 다음은 그냥 요소(또는 가상 요소)가 많은 순서입니다.

5강. CSS 최적화

코드 줄이기

6강. CSS의 다양한 단위들

px : 절대적인 값, 다른요소의값에 영향x

rem : 상대적인 값, <html>태그의 font-size에만 영향받음

ex) 2rem = <html>의 font-size의 두배

em : 상대적인 값, 자신의 font-size를 기준으로 함

ex) 2em = 자기자신의 font-size의 두배, 정해지지 않았을 경우 상위요소 값 상속

% : 어느 항목에 쓰이냐에 따라 다른 기준 적용

/*font-size*/
.container {
  font-size: 20px;
  background-color: lime;
}

.container .text {
  font-size: 180%; /* 상위 요소인 container의 font-size * 1.8 = 36px */
  background-color: skyblue;
  margin: 0;
}

/*padding*/
.container {
  width: 200px;
  background-color: lime;
}

.container .text {
  padding-left: 30%; /* 상위 요소의 width * 0.3 = 60px */
}

/*height에 적용해도 width기준으로 % 계산됨*/
.container {
  width: 200px;
  height:30px;
  background-color: lime;
}

.text {
  padding-top: 30%; /* 상위 요소의 width * 0.3 = 60px */
}

Display

1강. display

2강. display 정리

inline, block, inline-block, list-item, table, flex, none, ..

inline display

다른 요소들과 같은 줄에 머무르려고 하는 성향, 가로 길이는 필요한 만큼만 차지

ex) <span>, <b>,<i>,<a>,<img>,<button>

block display

새로운 줄에 가려고 하는 성향, 가로 길이를 최대한 많이 차지 ex) <div>,<h1>,<p>,<nav>,<ul>,<li>

inline-block display

inline의 한 줄 내에서 다른 요소들과 연결되는 속성 + block의 width, height, margin 등의 속성 ex) img

+ inline-block 중앙정렬

1) 상위태그에 text-align:center

2) block으로 바꾸고

text-align: center (width:100% 인 경우) 또는

/ margin-left: auto, margin-right: auto (width:100%가 아닌 경우, inline-block 요소, 고정너비 block요소)

3강. inline-block

4강. inline-block 정리

block 요소 : 너비, 높이값 설정 가능

inline요소 : 너비, 높이값 설정 불가능

inline-block : 한 줄에 있으면서(inilne) 너비, 높이값을 가질 수 있음(block)

<span>TEST</span>
<div style="display: inline-block; width: 300px; height:100px; vertical-align: bottom">WHY?</div>
<span>TEST</span>

작성하신 코드의 경우에는 div 태그가 span 과 div 태그가 가질 수 있는 높이의 최대값을 가지게 됩니당.

inline-block 요소에 height 값을 주셨기 때문입니다. inline 요소였다면 height를 가질 수 없을테지만용

이런 경우, div 태그는 위, 아래로 움직일 공간이 없기 때문에 vertical-align 에 반응하지 않게 됩니다.

대신 좌우 span 태그의 test 글자들이 baseline 에 맞추기 위해 내려오게 되는 것입니다^^

5강. <img> 태그의 비밀

img를 중앙정렬하는 두가지 방법

//1. 이미지를 중앙정렬 - 권장
img{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

//2. 부모요소에서 내부 컨텐츠를 중앙정렬
.container{
   text-align: center;
}

<div class="container">
  <img src="">
</div>

6강. 다양한 링크

<a href="">링크</a>

<a href="">
   <img>
   <h1></h1>
   <p></p>
</a>

7강. 이미지버튼

inline태그는 html의 띄어쓰기 간격이 적용됨

8강. Baseline

텍스트가 차지하는 공간에서 글자의 하단 부분

img 의 가장 하단 부분

inline-block내의 여러줄 일 때는 내부의 가장 마지막 텍스트의 하단

/ 내부컨텐츠가 없을 때는 inline-block자체의 가장 하단 부분

9강. vertical-align pt.1

vertical-align: inline, inline-block요소에 적용됨

vertical-align : baseline; 기본값 : 부모요소의 baseline에 맞춰짐

baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치

div{background: pink;}
.alex{background: red; font-size: 30px; vertical-align: top;}
.ben{background: blue; font-size: 10px;}
.chris{background: yellow; font-size: 16px;}


<div>
 <span class="alex">alex</span>
 <span class="ben">ben</span>
 <span class="chris">chris</dispanv>
</div>

가장 큰 alex에 vertical-alig: top 일 때!

1) alex제외, 가장 큰 chris가 alex의 top과 맞춰짐

2) vertical-align이 설정 되지않은 ben은 chris의 baseline에 맞춰짐

줄간격을 일정하게 유지하기 위해서?

10강. vertical-align pt.2

div{background: pink; font-size: 10px;}
.alex{background: red; font-size: 30px;}
.ben{background: blue; font-size: 10px;}
.chris{background: yellow; font-size: 16px;}

<div>
   x
   <span class="alex">alex</span>
   <span class="ben">ben</span>
   <span class="chris">chris</span>
</div>

1. ben {vertical-align: middle;} 일 때 : 부모"x"의 중앙에 맞춰짐

2. ben, chris {vertical-align: middle;} 일 때 : 부모"x"의 중앙에 맞춰짐,

설정되지않은 alex는 부모의 baseline에 맞춰짐(하단에 여백이 생김)

3. ben, chris, alex {vertical-align: middle;} 일 떄, 가장 큰 alex를 기준으로 중심이 맞춰짐 (줄높이 최소화)

11강. 세로 가운데 정렬 꿀팁

가로 가운데 정렬

inline, inline-block 요소 : 부모요소에 text-align: center;

block 요소 : margin-left: auto; margin-right: auto;

세로 가운데 정렬

가짜 요소 더하기 (부모요소의 height값이 있을 경우)

height:100%를 차지하는 가상의 형제요소 추가(height만 100% 컨텐츠, 넓이가 없이 height만 100%), 여백없애기

line-height로 해결 (부모요소의 height값이 있을 경우)

부모요소에 height와 동일한 line-height설정 -> line-height는 상속되므로 자식요소에 line-height::normal; 설정

12강. 내비게이션 바 로고

float 된 해당요소는 vertical-align으로 정렬을 할 수가 없음

저작자표시

'웹 퍼블리싱 > [codeit] 웹 퍼블리싱 (완)' 카테고리의 다른 글

[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (4) (0)	2021.06.01
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (3) (0)	2021.05.30
[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (1) (0)	2021.05.24
[ codeit ] 웹 퍼블리싱 - HTML/CSS 시작하기 (0)	2021.05.23

현재글[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (2)

My record for programming.

Today :
Yesterday :

기록저장소