New 병아리 개발자

*border-radius

- CSS border-radius: 설정값px; 을 통해 모서리 값 변경, 원형 등으로 만들 수 있다.

*cursor:pointer

- hover 와 비슷한 기능으로, 마우스를 올렸을때 커서를 포인터로 바꾼다.

*상속 (inherit)

- 부모를 따라하는 것

- border:inherit 등으로 사용 가능하다.

- 기본값이 inherit인 대표적인 경우 : text-align, font-size, font-weight, letter-spacing, font-family

*마크업

- HTML 작업을 의미.

*노멀라이즈

- 기본 스타일로 초기화(작업 시 처음에 엘리먼트를 평범하게 만드는 것)

// HTML
안녕하세요.
<br>
<a href="#">안녕하세요.</a>

<section>
    <div>1</div>
    <div>2</div>
</section>

// CSS
a {
    color:inherit;
    text-decoration:none;
}

*HTML 가운데 정렬

- HTML에 가운데 정렬은 원래 없음

- inline-block 의 가운데 정렬은 부모에 text-align: center 줘야함

- block요소의 가운데 정렬은 자신의 왼쪽, 오른쪽 여백을 auto로 줘서 가운데로 가게하는 방법밖에 없다.

*무지개 만들기

// HTML
<nav>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</nav>

// CSS
nav {
    text-align: center;
}
nav > div {
    background-color: red;
    width: 13%;
    height: 100px;
    display: inline-block;
}

nav > div:nth-child(7n + 2) {
    background-color: orange;
}

nav > div:nth-child(7n + 3) {
    background-color: yellow;
}

nav > div:nth-child(7n + 4) {
    background-color: green;
}

nav > div:nth-child(7n + 5) {
    background-color: blue;
}

nav > div:nth-child(7n + 6) {
    background-color: navy;
}

nav > div:nth-child(7n + 7) {
    background-color: purple;
}

*이미지 배치 ( 엘리먼트 4개만 사용하여 )

// HTML
<img src="http://bnx.oa.gg/img/20160913AM105101_1074.jpg" alt=""> 
<img src="http://bnx.oa.gg/img/20160921PM33800_8489.jpg" alt="">
<img src="http://bnx.oa.gg/img/20160913PM122312_9304.jpg" alt="">
<img src="http://bnx.oa.gg/img/20160913PM122323_2917.jpg" alt="">



// CSS
body {
    text-align:center;
}
img:nth-child(1) {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

*메뉴 만들기

// HTML
<h2>메뉴 예시</h>

<!-- 메뉴 박스 -->
<nav>
    <!-- 메뉴 -->
    <section>
        <!-- 메뉴 아이템 -->
        <div>
            <!-- 메뉴 아이템 텍스트(클릭하면 이동해야 하므로 a태그 사용)-->
            <a href="#">Home</a>
        </div>
        <div>
            <a href="#">Tutorials</a>
        </div>
        <div>
            <a href="#">Articles</a>
        </div>
        <div>
            <a href="#">Inspiration</a>
        </div>
    </section>
</nav>



// CSS
/* 노말라이즈 항상 먼저 진행*/
/* 노말라이즈 시작 */
body, h2 {
    margin: 0;
}
a {
    color:inherit;
    text-decoration: none;
}
/* 노말라이즈 끝 */
/* 커스텀 */
nav {
    text-align: center;
}
nav > section {
    background-color:#afafaf;
    display: inline-block;
    text-align:center;
    border-radius: 10px;
    padding: 0 20px;
}
nav > section > div {
    display: inline-block;   
}
nav > section > div > a {
    padding: 20px;
    display: block;
    font-weight: bold;
}

nav > section > div:hover > a {
    background-color: black;
    color: white;
}

*img

- 이미지 사이즈 조절 시 높이만 or 넓이만 주면 알아서 비율에 맞게 바뀐다. ( 높이, 넓이 같이 줄 경우 이미지가 찌그러진다.)

- 이미지는 기본적으로 inline 이다.

1. 이미지 삽입

// HTML

<img src="이미지파일 주소.jpg" alt="">

2. margin / padding

- margin : 박스의 바깥쪽 여백

- margin-right / left / top / bottom 존재 

- margin : 값이1개px; 인 경우 상하좌우

- padding : 안쪽 여백

- padding : 박스의 안쪽 여백

- padding-right / left / top / bottom 존재 

- padding : 값이1개px; 인 경우 상하좌우

3. nth-child

- div: first-child : 첫번째 요소

- div: nth-child(2) : (숫자)번째 요소

- div: last-child : 마지막 요소

- div: nth-last-child(2) : 마지막에서 (숫자)번째 요소

- section > :nth-child(5n + 1) 등으로 응용 가능하다.

4. lorem

- lorem + tab 입력 시 임의의 문장 입력된다.

*글자 효과 제거

- CSS에 text-decoration: none; 입력 시 글자에 적용된 효과가 제거된다. 

// HTML
<a href="#">안녕</a>
<div>
    <a href="#">안녕</a>
</div>

// CSS
div > a {
    /* 글자의 효과 제거 */
    text-decoration:none;
}