멋쟁이사자처럼 프론트엔드 스쿨 2기 4_Day

aydennote·2022년 4월 1일
CSShtml멋쟁이사자처럼프론트엔드 스쿨
1

멋사 프론트엔드 스쿨2기 회고

목록 보기
6/62
post-thumbnail
  1. inherit과 initial
  2. ceter align
    1) margin:auto
    2) text-align:center
    3) vertical-align:middle
    4) transform:translate(X%, Y%)
  3. width:100% 와 width:auto 의 차이
  4. 인라인 요소와 블록 레벨 요소
  5. 마진 병합
  6. 선택자 우선순위
  7. 그 외
    1) CSS background-image와 HTML <img>요소의 차이
    2) overflow:hidden
    3) 이미지 스프라이트 기법

1. inherit과 initial

inherit은 상속받는 것으로 생각하면 된다. 부모 요소의 속성값을 상속받아 사용한다. border, margin, padding, float, position 등의 속성은 하위 요소에 상속되지 않는다.
initial은 속성값을 초기화하는 것으로 생각하면 된다. 속성별로 초기화 값이 다르므로 MDN 사이트를 참고하는 것이 좋다. IE에서 지원되지 않아 사용은 피하는 것이 좋다.

2. Center align

중앙 정렬에는 정말 많은 방법이 있으며, 정답은 없다고 생각한다.

1) margin:auto

블럭 레벨 요소는 한 줄에 하나씩 출력이 되어야 하기 때문에 오른쪽 마진이 자동으로 들어간다. 컨텐츠는 우측에 정렬되어 있으며, margin:auto를 사용하게 되면 좌우 마진이 균등하게 들어가기 때문에 컨텐츠가 가운데에 올 수 있다.

2) text-align:center

말 그대로 텍스트를 가운데 정렬하는 속성이다. 블럭 레벨 요소에서 사용된다. 인라인 요소의 경우, 컨텐츠 만큼만 공간을 차지하기 때문에 위치 이동이 되지 않는다. 하지만 위에 말은 조금 오해에 소지가 있다. 블럭 요소 안에 있는 텍스트를 가운데로 정렬시키는 것이지 블럭 레벨 박스 자체를 옮기지는 않는다.살색 부분이 <div>, 파란색 부분이 <p> 요소이다.
div {text-align:center}
p {text-align:center}
모두 결과는 같다. <p>요소가 차지한 공간에서 중앙 정렬이 된 것을 볼 수 있다. <p>요소가 중앙 정렬이 된 것이 아니라, 블럭 레벨 요소 안에 있는 텍스트가 정렬이 됐다.

3) vertical-align:middle

vertical-align:middle 속성은 인라인 요소와 table box에서 수직 정렬할 때 사용한다.

4) transform:translate(X%, Y%)

자식 요소가 부모 요소의 절반 사이즈 일 경우, transform:translate(50%, 50%) 으로 수평, 수직 정렬이 가능하다.

.box1{
    width: 400px;
    height: 400px;
    background-color: aqua;
/* static 속성이 아니기 때문에 위치 조정 기준이 되는 부모 요소 */
    position: absolute; 
}
.box2{  
    position: absolute; 
    width: 100px;
    height: 100px;
    top:50%;
    left:50%;
    background-color: yellow;
    transform: translate(-50%, -50%); 
}

소스코드 box2 맨 아래 transform: translate(-50%, -50%); 이 없다면, box 왼쪽 상단 모서리 기준으로 가운데 정렬되기 때문에 빨간색 박스로 이동된다. box2 사이즈 기준 -50% -50%를 넣어야 가운데 정렬이 될 수 있다.

3. width:100% 와 width:auto 의 차이

width:100%와 width:auto는 부모 요소의 너비만큼 가득 채운다는 의미에서 같다. 다만, width:100%는 margin, padding, border 영역을 다 수용하여 영역 값이 조금이라도 주어지면 부모 요소의 너비를 넘게 된다. width:auto는 부모 요소의 너비만큼 margin, padding, border 영역을 주지 않는 이상 부모 요소 너비를 넘지 않는다. 이 문제를 해결하기 위해 box-sizing:border-box 입력하여 width, height 사이즈에 margin, padding, border를 포함 시켜주면 된다.

4. inline element와 block level element

인라인 요소는 컨텐츠 크기에 따라 사이즈가 결정되기 때문에 width, height 개념이 없다.
블록 레벨은 요소 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다.
인라인 블록 요소는 기본적으로 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다. 하지만 인라인 요소에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.
빨간 박스가 블록 레벨 요소이며, 파란 박스가 인라인 요소, 초록 박스가 인라인 블록 요소이다.

div{
    width: 50px;
    height: 50px;
    background-color: red;
}
span{
    width: 100px;
    height: 100px;
    background-color: blue;
}
.inlineBlock{
    display: inline-block;
    background-color: green;
}

inline 요소인 span에 너비와 높이를 지정하였으나 변화되지 않았고 인라인 블록 레벨과 블록 레벨만 변화 되었다.

5. 마진 병합

독학하면서 비교적 최근에 알게된 개념으로 금일 강의 시간에 언급된 마진 병합이다. 인접한 두 요소 모두 마진이 있다고 가정했을 때 하나의 마진만 들어간 것처럼 마진이 겹치는 현상이다. 마진 상쇄가 일어나는 경우는 3가지이다.

1. margin 방향이 겹친 경우

.box1{
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: blanchedalmond;
}
.box2{
    width: 200px;
    height: 200px;
    margin: 60px;
    background-color: royalblue;
}

위 CSS 스타일 보시면, box1 margin-bottom:50px; 과 box2 margin-top:60px 이 겹쳐 있다. 이렇게 인접한 두 요소의 마진이 겹친 경우, 더 큰 마진이 화면에 적용된 것 처럼 보인다. 여기서 중요한 것은 그렇다고 작은 마진이 없어진 것이 아니다. 큰 마진에 겹쳐서 안 보이는 것뿐 작은 마진도 적용은 되어 있다.

2. 부모 요소와 자식 요소 마진이 겹친 경우

.box1{
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: blanchedalmond;
}
.box2{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: aquamarine
}

box2의 마진 10px은 box1의 부모 요소에 마진 50px에 겹쳐 안 보이며, 화면상 50px만 적용된 것으로 보인다.

3. 마진 병합 해결

1) 부모 요소에 overflow:hidden 적용.
2) 부모 요소에 display:flow-root 적용.
3) 부모 요소에 border 값을 적용하여 경계선 생성.
4) 부모 요소에 display: inline-block 값을 적용

6. 선택자 우선순위

타입(태그)<클래스<id<html style 속성<!important 순서로 우선순위가 있다. 좀 더 구체적인 것에 우선순위가 높다. 우선순위가 같다면, 소스코드상 아래 있는 것이 적용된다. 웬만하면 선택자 선에서 끝내는 것이 좋다.
선택자에 마우스를 호버시키면 해당 선택자가 얼마나 구체적인지 알 수 있다. 0, 1, 0 은 id, class, type 순서이다.

7. 그 외

1) CSS background-image와 HTML <img>요소의 차이

CSS background-image는 디자인적 요소이고 <img> 요소는 컨텐츠에 필요한 요소이다.

2) CSS overflow:hidden

부모 요소에서 벗어나는 사이즈를 잘라내는 속성이다. 부모 요소에 overflow:hidden 속성을 추가하여 사용한다.

3) 이미지 스프라이트 기법

사진처럼 여러 이미지를 하나의 이미지로 관리하는 기법으로 이미지 관리 용이, 웹페이지의 로딩 시간 및 용량을 감소하는 장점이 있다.
먼저 이미지의 크기를 지정해주고 background를 사용해서 이미지를 넣는다. 그 후에 Background-position을 사용해서 이미지 위치를 지정하여 원하는 이미지를 로딩한다.

width: 25px; 
height: 25px; 
background: url(/image/flower_sprites.png) no-repeat;
background-position: -100px -100px;
profile
aydennote
기록하는 개발자 Ayden 입니다.
이전 포스트

멋쟁이사자처럼 프론트엔드 스쿨 2기 3_Day

다음 포스트

멋쟁이사자처럼 프론트엔드 스쿨 2기 5_Day

2개의 댓글

comment-user-thumbnail
<SeongHun />
2022년 4월 2일

이미지 스프라이트 기법은 정말 생소했었는데 알게 되어서 너무 좋았어요!
웹페이지 성능 최적화 기억해 두겠습니다!!!

1개의 답글