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

6751 단어 프론트엔드 스쿨CSS멋쟁이사자처럼htmlCSS

안녕하세요 Ayden 입니다.

오늘의 학습 내용은 CSS 기초입니다.

  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;
[Android] ViewPager2 With Tab + Bar
[TIL] #7. 프로그래머스 JOIN

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage