# 5. TIL

오늘도 홈페이지를 만들다가 공부한 것을 기록했습니다😁

1. flex

container 안에 있는 여러 요소를 정렬시킬 때 사용할 수 있는 속성을 알아보겠습니다.

• justify-content : 가로축을 기준으로 좌, 우 정렬을 관장합니다.

속성	설명
flex-start (default)	요소들을 컨테이너의 왼쪽으로 정렬
flex-end	요소들을 컨테이너의 우측으로 정렬
center	요소들을 컨테이너의 중앙으로 정렬
space-between	요소들 사이에 동일한 간격을 줌
space-around	요소들 주위에 동일한 간격을 줌
space-evenly(FireFox OS만 가능)	첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격이 같도록 분산

• align-items : 세로 축을 기준으로 정렬

속성	설명
stretch(default)	컨테이너의 맞게 늘림
flex-start	컨테이너의 최상단으로 정렬
flex-end	컨테이너의 최하단으로 정렬
center	컨테이너의 세로 축의 중앙으로 정렬
baseline	컨테이너의 시작위치에 정렬

예시

.nav{
    display: flex;
    justify-content: flex-end;
    line-height: 86px;
    width:1280px;
    background: auto;   
}

출처

---

2. '>' (꺽쇠)와 ' '(스페이스)차이

• > (자식선택자): 많은 요소들 중에 특정한 한 요소에 대해서 서식을 적용하고 싶을 때 사용

.about_text > h1,
.about_text > h4{
    color:seashell;
}

• (하위 선택자): 전부 동일한 서식을 적용할 때 사용

h1{
    font-size: 48px;
    font-weight: 100px;
}

출처

3. Bullet 지우기

ul, li 태그를 사용하다보면 자동으로 * 같은 마커가 생긴다. 그래서 이 마커를 지우는 방법을 공유하고자 합니다.

• CSS, HTML에서 불릿 삭제

1. CSS

ul{
   list-style:none;
}

2. HTML

<style>
ul{
   list-style:none;
   }
</style>

• CSS, HTML에서 불릿 삭제 + 들여쓰기 삭제

1. CSS

ul{
   list-style:none;
   padding-left:0px;
}

2. HTML

<style>
ul{
   list-style:none;
   padding-left:0px;
   }
</style>

출처

---

4. form 요소

HTML, CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다.

• HTML 입력 코드

<form>
<inputtype="search"placeholder="search">
<span>검색</span>
</form>

• CSS 입력 코드

.searchArea > form > input{
    border: none;
    width:250px;
    height:40px;
    background: rgba(0,0,0,0.0);
    color:#fff;
    padding-left: 10px;
}
.searchArea > form > span{
    width:50px;
    color:#fff;
    font-weight: bold;
    cursor: pointer;
}

출처

---

5. 주석을 잘 달아야하는 이유

주석은 프로그래밍에 있어서 내용을 메모하는 목적으로 쓰이며 소스코드를 더 쉽게 이해할 수 있게 만들 때 사용합니다.

코드를 작성하다보면 내가 작성했는데도 불구하고 이해가 안갈때가 많습니다. 근데 다른 사람과 작업을 한다면 코드가 섞여 더 알아보기 힘들겠죠.

때문에 주석은 누가 작성했는지 알 수 있는 것과 동시에 코드에 대한 해석이 적혀있어 코드 해석이 쉬워지는 장점이 있습니다.

하지만 주석은 무작정 길고 상세하게 적는 것이 아니라 정말로 설명이 필요한 부분만 기재하는 것입니다.

• 예제

<!-- amount end-->
/* font size 정리 */
/* 2021.05.06_maintext01_이지훈 */

출처