[HTML/CSS]정리1

기초강의 들으면서 중요한 부분만 정리함.

Chapter 1

margin : 바깥 여백

padding : 안쪽 여백

border : 테두리

이미지,박스 가운데 정렬

display : block;
margin-left : auto;
margin-right : auto;

• display : block이 내장되어 있는 태그:

  <div>,<p>,<h1><li>
  display : block 이란? 한 행을 전부 차지함.

요소를 공중에 띄워 왼쪽/오른쪽 정렬

• float 속성 사용

.left-box{
	width:100px;
    	height:100px;
    	float:left;
}

주의❗ float 쓴 후 다음 HTML 요소들이 제자리를 잘 찾기 위해 clear : both 속성을 써주는 것이 좋다.

참고❗ float을 쓸 때는, float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는 것이 좋다.

• display: inline-block 속성 사용

.left-box{
	width:100px;
    	height:100px;
    	display:inline-block;
}

display:inline-block은 "내 폭과 높이만큼 자리차지하게 해주세요~" 라는 뜻이다. 간편하지만, <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에 가로로 정렬하려면 태그 사이의 공백도 제거해야 한다.(걍 float 쓰는게 좋다)

레이아웃

• Tip1) margin 속성으로 상하좌우 마진을 한꺼번에 줄 수 있다.

.box{
	margin : 10px auto 30px auto;
}

• Tip2) PC 레이아웃을 만들 때, 항상 container 또는 wrap 박스를 만들어 놓는게 좋다. 또한, container 박스엔 항상 width를 지정해놓는게 좋다.

<div class = "container">
  <div class = "left"></div>
  ...

• Tip3) HTML 태그에 클래스 두개 이상 붙이기

<div class = "container text-center"></div>

띄어쓰기를 한 다음 원하는 클래스를 추가하면 됨 (ex. container, text-center)

셀렉터 사용법

1. 공백

.navbar li{
	display:inline-block;
}

☑ navbar 클래스 안에 있는 li 태그를 모두 선택함.

☑ 스페이스 다음 tag 셀렉터 말고도 class 셀렉터, id 셀렉터 모두 자유롭게 사용가능

☑ .class .class .class 이렇게 무한히 연달아 사용 가능

---

2. 꺽쇠 괄호 (>)

.navbar>li{
	display:inline-block;
}

☑ 꺽쇠 괄호를 이용하여 바로 밑에 있는 자식만 선택할 수 있다.

---

3. 더 상세히 선택하고 싶을 때

.navbar li>span{
	color:red;
}

☑ .navbar 안에 있는 모든 li, 그리고 그 안에 있는 모든 직계 자손 span 태그를 선택

간단한 링크 디자인

링크의 기본 밑줄을 제거하고 싶다면?

.link{
	text-decoration : none;
}

링크 방문 후 링크 스타일 설정

.link:visited{
	color : black;
}

배경 관련 CSS 속성들

.main-background{
	background-image : url(이미지 경로);
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
    background-attachment : fixed;
 }

☑ background-size : cover

배경이미지로 꽉 채워주세요

☑ background-size : contain

배경이 잘리지 않도록 꽉 채워주세요

☑ background-attachment : fixed

☑ 스크롤될 때, 배경이 움직이지 않도록 해주세요

주의해야 할 margin 버그

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

div 박스 안에 <p>를 사용함. <p> 상단에 margin을 주기 위해 margin-top을 주게 되면, div와 p 동시에 margin-top이 생기는 "margin collapse effect" 버그가 일어난다.

☑ Margin collapse effect

원래 박스들의 테두리가 만나면 margin이 합쳐지는데, 정확히 말하자면
1. 마진을 하나로 합쳐주고
2. 둘 다 마진이 있다면 둘 중 더 큰 마진을 하나만 적용하게 된다.

따라서 두 박스의 테두리가 겹치지 않도록 해야한다. 위에서는 부모 박스 div에 padding=1px 로 설정해주면 쉽게 해결할 수 있다.

position 속성과 좌표 레이아웃

1. 좌표 속성

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

top,left,bottom,right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있다.
그러나 이 좌표속성을 사용하려면 position 속성이 필요하다. position 속성은, 좌표속성을 적용할 기준점이 여기다! 라고 지정해주는 역할.

2. position 속성

.box{
	position:static;	/*좌표적용 불가*/
    	position:relative;	/*기준이 내 원래 위치*/
    	position:absolute;	/*기준이 나의 부모-정확히는 position:relative 를 가진 부모*/
    	position:fixed;		/*기준이 브라우저 창(viewport)*/
}

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

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

box 만들기

☑ 주의점 : 박스의 width를 주게 되면 padding,border를 고려하지 않는다. 즉, padding 안쪽 부분만 실제 width로 설정한다.따라서 padding을 많이 주게 되면, 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있다.

☑ box의 폭을 border까지 고려해서 설정하고 싶을 때 쓰는 속성

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

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

div{
	box-sizing : border-box;
}
body{
	margin:0;
}
html{
	line-height:1.15;
}
table{
	border-collapse:collapse;
}
li,a{
	text-decoration : none;
}

☑ 참고 CSS normalize

브라우저간 통일된 스타일을 주기 위해, CSS normalize 를 하는 게 좋다.

☑ CSS Normalize 링크 : https://github.com/necolas/normalize.css/blob/master/normalize.css
위에 있는 스타일을 CSS 파일에 복붙하거나 다운받은 후 태그로 첨부하면 됨.

form&input

1. HTML의 속성으로 CSS 셀렉터 사용

input[type=email]{
	color:grey
}

ex)input의 type 속성이 email인 요소만 찾아서 스타일을 적용.

2. label 태그와 for 속성

☑input 대신 label을 눌러도 input을 선택할 수 있음.
input의 id, label의 for 속성을 똑같이 맞춰줌.

<input type = "checkbox" id="subscribe">
<label for="subscribe">누르기</label>

table & vertical-align

1. table 셀 내에서 상하정렬할 때

td,th{
	vertical-align : middle; /*top,middle,bottom*/
}

2. inline 요소 간 상하정렬할 때

• display:inline 혹은 inline-block 요소들을 나란히 배치하면 상하정렬이 이상해질 때가 있음.
  특히, 큰 이미지와 글, 큰 글씨옆에 작은 글씨 등의 경우 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많다.
  이 때, vertical-align : top 등을 이용하여 맞출 수 있다.

nth-child 셀렉터

.cart-table td:nth-child(2){
	color:red;
}

여러 요소를 찾은 뒤, 원하는 n번째 요소만 스타일을 주고 싶다면 :nth-child(n)을 붙여주면 된다.

위 코드는, .cart-table 안에 있는 모든 td를 찾은 뒤, 2번째 td에만 color를 적용함.

☑ 그 외 예시

.cart-table td:nth-child(even){
	color:red; /*짝수로 등장하는 td에만 스타일 적용*/
}
.cart-table td:nth-child(3n+0){
	color:red;	/*3의 배수로 등장하는 요소에만 스타일 적용*/
}

그 외 table 관련 스타일 지정

1. 테두리 색상은 밑에만 넣고 싶다면,border-bottom 속성 사용

td,th{
	border-bottom : 1px solid black;
}

2. 셀 블록마다 width를 다르게 설정하고 싶다면,width 설정하면 됨.

.name{
	width:50%
}

3. td 여러개를 합치고 싶다면, colspan 사용

<td colspan="4"></td>

CLASS 작명법(OOCSS,BEM)

OOCSS (Object Oriented CSS)

• 뼈대와 살을 분리하라
  1. 버튼의 기본 스타일인 padding, font-size 등을 정의하는 클래스를 만들고,
  2. 상세 스타일을 설정할 클래스를 따로 만든다.

---

OOCSS 로 클래스 분리함의 장점

1. 중복된 스타일을 재사용가능하다.

2. 유지보수가 편리해진다.

3. 코드를 빨리 짤 수 있다.