LIKELION FRONTEND SCHOOL 5일째

css의 기본

css를 할 때는 우선 5가지 과정을 통해 css를 작성해야 체계적인 css코드 작성이 가능하다.

1. 전체적인 덩어리를 먼저 나눌 것. 컨텐츠를 넣는 것은 나중에 해도 늦지 않다. 큰 덩어리를 잡고 나면 구분하기가 쉬워진다.

2. 구분을 위해 시각적인 요소는 잠깐 채워놓는 것이 좋다. background color를 넣어놓거나 border를 설정해 놓는 등.

3. 기본 레이아웃 관련 스타일을 짜 준다. 안에 컨텐츠를 넣기 전에 공간을 마련해 주는 것이다. 보통 margin과 padding을 이용한다.

4. 초기화를 통해 가장 기본 상태로 만들어준다. 타입셀렉터와 요소들을 손질해 준다.

5. 이후 class 속성을 사용하여 하나하나 맞춰 나가기 시작한다.

css 기법 여러가지

1. 다중 클래스

<div class="hello world">
	<h1>hello world</h1>
</div>

.hello{
	width: 30px;
    height: 30px;
}

.world{
	border: 1px solid black; 
}

위와 같이 class에 이름을 두개 써주어도 정상적으로 작동시킬 수 있다.

2. 마진 겹침

<div class="parent">
	<div class="child">
    	1
    </div>
	<div class="child">
    	2
    </div>
</div>

.parent{
	background-color: red;
}

.child{
	background-color: blue;
	margin: 20px
}

위와 같이 코드를 작성하면 child사이의 margin이 40px이 될 것이라고 예상할 수 있지만 css는 마진 겹침을 방지하고 있기 때문에 둘 사이의 margin은 20px이 된다. 그렇다면 parent와 child 사이 위 아래의 margin은 어떻게 될까? 놀랍게도 0이다. 이는 child의 margin요소가 parent의 margin으로 들어가기 때문이다. 이를 막기 위해서는 3가지 방법이 있다.

/*첫번째 방법*/
.parent{
	overflow: hidden;
}

/*두번째 방법*/
.parent{
	display: inline-block;
}

/*세번째 방법*/
.parent{
	border: 1px solid black;
}

위 방법 중 가장 알맞은 방법을 선택하면 된다.

3. selector

우리가 css를 줄 때엔 다양한 방식이 있다.

<div id="gold" class="silver">
	<p>hey~</p>
</div>

위와 같은 코드가 있다고 하자. div에 배경색을 주기 위해서는

div{
	background-color: red;
}

.silver{
	background-color: yellow;
}

#gold{
	background-color: green;
}

위와 같이 줄 수 있다. 이 중 적용이 되는 것은 무엇일까?

바로 id selector인 green이 적용된다. 왜 일까?

기본적으로 태그 선택자엔 동메달 한 개가 부여된다. 뒤이어 클래스 선택자에는 은메달 한 개, 아이디 선택자에는 금메달 한 개가 부여된다. 이들 중 가장 메달 순위가 높은 것이 적용되는 것이다. 메달이기 때문에 동메달이 10개가 모인다고 할지라도, 1009개가 모인다고 할지라도 은메달 한 개를 이길 수는 없다. 또한 css와 style태그에서 아무리 메달을 딸지라도 html내에서 메달을 따 버리면 = 즉, inline style을 작성했더라면 여기에 우선순위를 준다. 마지막으로 이 모든 것을 통제하는 !important라는 수단이 있다.

div{
	background-color: black !important;
}

핵폭탄이 떨어지면 누가 뭐 메달을 따건 말건 상관없이 적용된다. 하지만 핵폭탄이 똑같이 떨어졌다면 그 후에 딴 메달은 상관이 있다.

4. IR 기법
   IR이 무엇이냐? Image Replacement를 뜻한다. 즉, 이미지의 대체 텍스트를 뜻한다. 주로 쓰이는 방식으로 3가지가 있다.

p{
	display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

위와 같은 방식은 Phark Method라고 하는데 의미있는 이미지의 대체 텍스트를 제공할 경우 쓰인다. 화면 바깥으로 -9999px만큼 내어쓰기를 해서 안 보이게 하는 방식이다.

p{
	display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

위와 같은 방식은 WA IR방식이라고 하는데 이미지가 없어도 텍스트를 보여주게 하기 위해 쓰이는 방식이다. z값에 -1을 주어 이미지 아래로 내려가 보이지 않게 끔 해주고 있다.

p{
	overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

위와 같은 방식은 Screen Out 방식으로 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 쓰인다. 그래서 첫 번째 방식과 다르게 width와 height의 설정 값이 0인 것을 알 수 있다.

5. image sprite

가장 중요한 image sprite 기법이다. 이걸 모르면 화면 내의 속도를 저하시킬 수 있다. 여러가지 이미지를 불러올 필요없이 이미지 한 개에 여러개의 이미지를 담아 한 번의 호출로 여러 이미지를 사용할 수 있게끔 만드는 방식이다. 이미지의 크기를 고정 시킨 후에 position만을 사용하여 다른 위치에 있는 이미지를 사용할 수 있도록 하는 방식인데 요즘 같이 이미지를 background로 불러오는 세상에서 필수라고 볼 수 있다.

.icon{
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(images/icons.png);
    text-indent: -9999px;
    background-size: 144px 96px;
} 

.icon.a{
    background-color: black;
    background-position: left top;
}

.icon.b{
    background-color: dodgerblue;
    background-position: center top;
}

.icon.c{
    background-color: orangered;
    background-position: right top;
}

위와 같이 icon의 높이와 너비를 결정한 후에 각각의 위치를 position을 통해 잡아 다른 이미지로 사용하는 방식이다.

6. margin, padding

div{
	margin: 20px 0 50px 20px;
    padding: 10px 0 0 50px;
}

위와 같이 margin과 padding은 위부터 시계방향으로 각각 다르게 값을 넣어줄 수 있다.