CSS 학습 내용 정리

조 은길·2022년 3월 4일

CSS TIL

Html & CSS

목록 보기

26/66

margin => 여백
padding => 안쪽 여백

border : 크기(px) 스타일(solid) 색깔(black);

border-radius: 5px;
=> 테두리를 둥글게 만들고 싶을때

margin-left: auto;
margin-right: auto;

부모 태그에 font-size를 줘도, 자식 태그에 먹힌다.
=> 왜냐면, 일부 스타일은 inherit 된다.

color: white;
=> 글자 색깔 줄때!!

float을 이용한 방법
=> 전통적이고 좋음

항상 전체를 감싸는 container 박스를 하나 만들자!!
=> 보통 wrapper 박스 or container 박스라고 한다.

header => 로고 있고, 상단 메뉴 있고 그런거...

width: 100%
=> 부모 태그의 width의 100%를 활용한다.

float: left; float: right;
=> inline-block 쓰지 않고, 붙일 수 있다.
=> 중단에 공간에 틈새마저 없다.

박스를 가로 배치할 때, float 쓰셈!!
clear: both;
- float 다음에 오는 요소에게 주면, float으로 발생하는 이상한 현상 해결가능!
- float 쓰고 나서 다음에 오는 요소를 clear르 주는게 좋음
inline-block을 사용하면, 박스 사이 공백제거가 귀찮음
- 미세한 공백이 있어서, 한 줄에 넣으려면 공백을 제거해줘야 한다.
- 공백을 제거해주고 싶으면, 부모 태그의 font-size를 0 으로 만들어줘라
- 단 HTML은 꺠끗해보이지만, CSS를 다룰 때는 잠재적인 문제가 생길 수 있다.
inline-block으로 가로정렬 하는 것보다는 float이 덜 문제적이고 편한 것같다.
부모 태그로부터 inherit 되는 스타일은 중요도가 가장 낮다.
=> 즉, 우선 순위가 가장 낮다!!
inline-block을 사용하면, 박스 안에 글을 쓸 때 이상해진다.
=> 이떄 vertical-align: top; (상하정렬)을 쓰면 해결된다.
display: inline-block;는 자기 크기만큼 자리 차지함.
=> 공백 제거 필요!!
=> 주변에 글이 있으면, 가끔 이상해짐
항상 "박스"부터 디자인하자!!
=> 그리고 세부사항을 들어가자!!
h4, p 태그도 display: block; 속성을 가진다.
하나의 박스로 취급하면, 더 쉬울 것같은가??
float 속성 => 붕 뜬다!! => 남들보다 좀 위로 뜬다!!!!!!

혼자 코드를 많이 짜봐야, 혼자 코드를 잘 짠다.
디자인 실력이 없다면, 다른 웹싸이트 보고 따라 만들어봐라!!

CSS에서 배경 넣기

.main-background {
  background-image : url(../img/shoes.jpg);
  background-size : cover;
  background-repeat : no-repeat;
  background-position : center;
  background-attachment : fixed;
}

background-size는 px, % 단위도 가능하고

cover는 배경으로 꽉채워주세요

contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.

background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다.

배경 두개 겹치기 신공


.main-background {
  background-image : url(../img/shoes.jpg), url(person.jpg);
}

콤마로 이미지 두개를 첨부하시면 됩니다.
투명도를 지원하는 png 이미지를 사용하면 더 재밌는 디자인을 만들 수 있겠군요.

배경에 검은색 틴트 주기

.main-background {
  background-image: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ), url(이미지경로~~) ;
 
}

linear-gradient 이건 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드인데,
여기에 투명도 0.5의 검은색을 입힌 후에 배경겹치기 스킬을 사용하면 됩니다.

주의해야할 margin 버그 - margin collapse

<div class="배경">
  <p>안에 글씨</p>
</div>

div 박스 안에 p 태그를 사용했다.

p 태그에 상단 margin을 주기 위해 margin-top을 주게 되면,
div와 p가 동시에 margin-top이 생기게 됩니다. 뭔가 이상하다.

이 현상은 margin collapse effect 라고 부르는 일종의 버그이다.

원래 박스들의 테두리가 만나면 margin이 합쳐진다. (박스가 내부에서 만나든 외부에서 만나든 상관없습니다.)

정확히 말하면,
1. 마진을 하나로 합쳐주고
2. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 됩니다.

그래서 두 박스의 테두리가 겹치지 않도록 해주시면 보다 더 정확한 마진 노가다를 하실 수 있다.

예시) 부모 박스에 padding을 1px 이렇게 조금 주는 것으로 쉽게 해결 가능하다.

참고로, 박스 2개 위아래 태두리가 겹칠 때도 margin callapse 현상이 일어난다.
=> 이런 상황에서는 마진 둘 중에 큰 것을 우선적으로 적용하게 된다.

불만이 있다면 웹표준을 관리하는 www.w3.org 이라는 단체에 따지도록 하자.

position 속성과 좌표 레이아웃 만들기

position 속성을 사용했을 때, 장점

장점 1. 좌표 이동 가능!! ( top, bottom, left, right )
좌표속성

.box {
  top : 20px;
  left : 30%;
}

top, left, bottom, right 라는 속성을 사용하면

요소의 상하좌우 위치를 변경할 수 있습니다.

하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다.

position 속성은 좌표속성을 적용할 기준점이 여기에요~! 라고 지정해주는 역할입니다.

position 속성은 크게 4개 값이 있습니다.

.box {
  position : static; /* 기준이 엄서요 (좌표적용 불가) */
  position : relative; /* 기준이 내 원래 위치요 */
  position : absolute; /* 기준이 내 부모요 (relative를 가진 부모) */
  position : fixed; /* 기준이 브라우저 창이요 (viewport) */
}

여기서 원하는 기준을 선택하시면 됩니다. 그럼 이제 좌표속성으로 좌표 값을 줄 수 있습니다.

position : absolute는 부모 박스를 기준으로 찰싹 달라붙은 뒤에 좌표값을 적용하게 되는데,
정확히 말하면 부모가 아니라 부모 중에 position : relative를 가지고 있는 부모가 기준입니다.

버튼이 부모 박스 안에 딱 달라 붙게 하고 싶다면??
=> 부모 태그에 "position: relative;"를 주고,
버튼 태그에 "position: absolute;" 주고 좌표를 움직여서
위치만 맞춰주면 되겠네.

position : absolute 를 적용한 요소 가운데 정렬

.button {
  position : absolute; 
  left : 0;
  right : 0; 
  margin-left : auto;
  margin-right : auto;
  width : 적절히
}

적어도 5개의 속성이 있어야 가운데 정렬이 가능합니다.
5개라니 약간 귀찮아집니다.

장점 2 : 공중에 뜸
=> 현재 태그보다 상단에 존재하는 태그가 마진 탑을 부여하면, 밑에 있는 태그도 같이 움직이는데, position 속성을 부여하면, 마진을 무시하고, 위로 올라간다. 그리고 원하는 위치에 맞게 좌표 설정을 해주면 된다.

어떤 박스가 위에 올지 우선 순위 정하기 : z-index

공중에 떠 있는 박스들이 많다면, 누가 맨 앞으로 올 것인지는 어떻게 정할 수 있는가??

이럴 때, z-index를 사용하자!!

z-index는 정수로 입력하고, 숫자가 높을 수록, 앞으로 온다.

ex) 이미지가 버튼 위로 가게 하고 싶을 때??
이미지는 2를 주고, 버튼은 1을 주면 된다.

주의
z-index가 작동하려면, position: absolute;나 position: relative; 속성이 붙어 있는 태그들에 한해서 작동한다.

이외에 z-index가 작동하지 않느다면??
=> z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

겹치는 박스 만들기

다른 방법도 있지만, position을 사용하는 방법이 가장 깔끔하다.

당연히 position 속성을 사용하면 되겠죠?
absolute, relative, fixed 중 하나를 사용하면 됩니다.

하지만 박스를 만들 때 주의점이 하나 있습니다.
원래 div 박스의 width를 주게되면 padding, border를 고려하지 않습니다.
padding 안쪽 부분만 실제 width로 설정합니다.

이걸 그림을 그려보면... 파란색 저 부분만 실제 width라는겁니다.
그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있습니다.
실제 업무에서는 사이즈 조금만 잘못되어도 다른 요소에 크게 영향을 줄 수 있습니다.
=> 그니까 결국 실제 보이는 값은 width + padding 이 된다는 뜻

박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}

PC와 모바일에서 둘다 되는 반응형 웹페이지를 만들고 싶을 때, %를 자주 사용한다.
하지만, %만 사용하면, 너무 커져서 보기 불편할 때가 있다. 그래서, 이것에 리미트를 걸어주고 싶을 때, max-width, min-width, max-height, min-height를 사용한다.

그러나, 여기서 width라는 개념에 문제가 발생한다.
width는 박스 내부의 영역 => 실제 글이 들어가는 공간, 그것의 폭이다.

다시 말해서, max-width를 설정해줘도 padding과 border가 커지면 최종 폭도 커진다.

그래서, 이런 width 값에 padding과 border를 포함하게해서 만드는 속성이

box-sizing : border-box; 이다.

CSS 파일 작성시 기본으로 쓰면 좋을 속성들

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

여기에 더해서,
모든 h, p 태그의 margin을 균일하게 설정하거나 11 분
position 숙제 & 반응형 width & box-sizing

겹치는 박스 만들기

당연히 position 속성을 사용하면 되겠죠?

absolute, relative, fixed 중 하나를 사용하면 됩니다.

하지만 박스를 만들 때 주의점이 하나 있습니다.

원래 div 박스의 width를 주게되면 padding, border를 고려하지 않습니다.

padding 안쪽 부분만 실제 width로 설정합니다.

이걸 그림을 그려보면... 파란색 저 부분만 실제 width라는겁니다.

그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있습니다.

웹사이트 대충 만드는 초보는 별 상관 없겠지만

실제 업무에서는 사이즈 조금만 잘못되어도 다른 요소에 크게 영향을 줄 수 있습니다.

박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성

.box {
box-sizing : border-box; /박스의 폭은 border까지 포함입니다/
box-sizing : content-box; /박스의 폭은 padding 안쪽입니다/
}
box-sizing이라는 속성을 주게되면 border까지를 실제 박스의 폭으로 설정해줍니다.

아주 고마운 속성입니다.

빨리 모든 div 박스에 추가해보도록 합시다.

CSS 파일 작성시 기본으로 쓰면 좋을 속성들

그래서 숙련자들의 CSS 파일을 보면 일단 이런 것들을 맨 위에 정의하고 시작합니다.

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

여기에 더해서

모든 h, p 태그의 margin을 균일하게 설정하거나

li, a 태그에 text-decoration : none 을 주거나

나중에 배울 table 태그에 border-collapse: collapse 를 주거나

이런 것들이 가능합니다.

이런거 미리 적고 시작하면 항상 편리하게 CSS 코드를 짤 수 있습니다.

가끔 CSS Reset 이런 식으로 부르기도 합니다.

여러분도 기본으로 복붙하고 시작할 "필수 기본값 CSS 리스트"를 하나 만들어두고 맨날 업데이트 해보십시오.

CSS normalize

동일한 CSS 속성값이라도, 브라우저마다 디자인이 다르게 보일 수 있음.

예를 들어, 크롬 vs 파이어폭스
<button>, <input> 기본 디자인이 다르다.

여기서는 width를 100으로 설정했는데, 왜 저 브라우져에서는 좀 더 큰 거지?? 등등

nomalize.css 파일을 복사 붙여넣기 하고 시작하면, 그런 문제를 해결할 수 있다.
크롬에 검색하면, 나옴

브라우져 간의 균일한 스타일을 기대할 수 있다.

HTML 파일 최상단에 link를 걸어놓고 시작하는게 제일 좋을 듯!!

내가 정리한 CSS Reset & CSS Reset - Normalize

CSS 초보와 고수의 차이

초보
그때그때 class를 새로 만들어서 쓴다.
고수
만들어둔 class를 재활용한다.
=> 재활용했는데, 스타일이 더 필요하면, class를 하나 더 추가하면 되는 것임!!

쓸데 많은 "Table 레이아웃"과 vertical-align속성

기본적인 table HTML 구성

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

표를 만들면, <table>

table태그 내에 tr은 row, td는 column을 의미합니다.

행렬

행 => 가로 => <tr></tr>
열 => 세로 => <td></td>

항상 <tr> 먼저 만들고, 그 안에 <td>를 채워넣어야 한다.
제목용 세로 열 만들 때는 <th></th>
=> td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리됩니다.
기능상 차이는 없는데, 나중에 분류할 목적으로 해두면 좋은 것!!
- 제목행은 <thead><thead/> 안에
- 일반행은 <tbody><tbody/> 안에 넣으면 좋다.
<table>은 기본적으로 틈이 존재!!
이것을 없애려면

/* `<table>`의 기본적인 틈을 없애주기 위한 속성 */
table {
  border-collapse: collapse;
}

테이블 셀 내에서 상하정렬할 땐 vertical-align

td, th {
  vertical-align : middle;
}

vertical-align 속성을 이용해 테이블 내에서의 상하정렬을 하실 수 있습니다.
top, bottom, middle 사용가능

vertical-align 의 용도
- inline / inline-block 요소 간의 세로정렬할 때, vertical-align을 쓴다.
  display : inline 혹은 inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있습니다.
  특히 큰 이미지와 글, 또는 큰 글씨옆에 있는 작은 글씨 등
  이런걸 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많은데,
  이럴 때 margin-top 이런거 대신 쓰는 속성입니다.
- top, middle, bottom 말고도 super, sub, px 단위로 사용가능합니다.
  (단, table 안에선 top, middle, bottom만 사용가능합니다)
display: inline;
=> 항상 옆으로 채워지는 폭과 너비가 없는 요소

조 은길

좋은 길로만 가는 "조은길"입니다😁

이전 포스트

레이아웃: 화면을 나누는 방법

다음 포스트

CSS 학습 내용 정리

Html & CSS

CSS에서 배경 넣기

배경 두개 겹치기 신공

배경에 검은색 틴트 주기

주의해야할 margin 버그 - margin collapse

position 속성과 좌표 레이아웃 만들기

position 속성을 사용했을 때, 장점

position 속성은 크게 4개 값이 있습니다.

position : absolute 를 적용한 요소 가운데 정렬

어떤 박스가 위에 올지 우선 순위 정하기 : z-index

겹치는 박스 만들기

박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성

CSS 파일 작성시 기본으로 쓰면 좋을 속성들

CSS normalize

CSS 초보와 고수의 차이

쓸데 많은 "Table 레이아웃"과 vertical-align속성

기본적인 table HTML 구성

테이블 셀 내에서 상하정렬할 땐 vertical-align

레이아웃: 화면을 나누는 방법

CSS 학습 내용 정리2

0개의 댓글