HTML / CSS - 기초 3편

* selector 문법

1. .(마침표) : 태그에 class값

css : class name 을 menubar인 태그에 속성 부여

.menubar { display : inline-block; }

2. #(샵) : 태그에 id값

css : id name 을 menubar인 태그에 속성 부여

#menubar { display : inline-block; }

3. 공백(스페이스바) : 부모 안에 있는 모든 자식

css : menubar(부모) 밑에 모든 li(자식) 태그에 속성 부여

.menubar li { display : inline-block; }

4. >(홑화살괄호) : 부모 안에 있는 직계 자식

css : menubar(부모) 바로 밑에 li(직계자식) 태그에 속성 부여

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

5. *(별표) : 해당하는 모든 요소

css : 모든 태그에 속성 부여

ㅤ* { font-size : 16px }  // 앞에 공백 제거 해야함

6. input[속성명=속성값]

해당 input에 해당하는 속성명과 속성값을 가진 태그를 선택

input[type=email] { padding : 10px }

7. nth-child(n)

class name = box인 태그 중 2번째 li 요소 선택

.box li:nth-child(2) { margin : 10px }

8. 이외 다양한 선택자 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

* 자주 사용하는 a 태그 CSS 속성

text-decoration : none; // 밑줄 제거

* 자주 사용하는 배경(background) CSS 속성

.main-background {
    width : 100%;
    height : 500px;
    background-image : url("./image/main_01.png");
    background-size : cover; // 배경으로 꽉채우기
    background-repeat : no-repeat; // 기본 속성인 반복 해제 하기(1개 배경만 보여줌)
    background-position : center; // 중앙에 배치하기
    background-attachment : fixed // 스크롤시 배경 고정하기
}

* margin 버그 ( margin collapse effect)

• 문제점 : 테두리가 만나면 margin이 합쳐지면서 더 큰 margin값이 적용됨
  • 해결법 : 부모 박스에 padding 1px 주면 쉽게 해결 가능

* position 속성 사용하기

1. relative : 자신의 원래 위치를 기준으로 이동 (기준점)

top : 100px 기준점을 기준으로 위쪽 부터 100px 이동(아래로 이동)
bottom : 100px 기준점을 기준으로 아래쪽 부터 100px 이동(위로 이동)
left : 100px 기준점을 기준으로 왼쪽 부터 100px 이동(오른쪽으로 이동)
right : 100px 기준점을 기준으로 오른쪽 부터 100px 이동(왼쪽으로 이동)

2. static : 좌표이동 X

3. fixed : 현재 화면을 기준으로 고정

4. absolute : 부모 태그 중에 해당 속성이 부여된 부모를 기준으로 삼는다.

position : relative // 부모 태그가 가지고 있어야함

* 레이아웃 배치

z-index 는 높을수록 화면 앞에 배치

DIV.A 가 DIV.B보다 앞(위)에 위치하게된다

z-index : 5 // DIV.A
z-index : 1 // DIV.B

* width 속성

width는 content의 영역의 너비를 의미함

max-width : 600px , padding : 50px을 하게되면 전체의 width는 650px이 된다.

해결법:

1. box-sizing : border-box;

// padding과 border를 포함한 width가 된다.

2. box-sizing : content-box;

// padding 안쪽 까지가 width가 된다.

* 자주 사용하는 input, input 속성 모음

html : input

<input type="text"> // text 타입의 input
<input type="email"> // email 타입의 input
<input type="password"> // password 타입의 input
<input type="radio"> // radio버튼 타입의 input
<input type="file"> // file 타입의 input
<input type="checkbox"> // checkbox 타입의 input
<input type="submit"> // submit(제출) 타입의 input
<select>
 <option>옵션1</option>
 <option>옵션2</option>
 <option>옵션3</option>
</select>
<textarea></textarea>

input에 자주 넣는 속성

<input placeholder="값은 없는 가상의 글자" value="실제 값이 있는 글자" name="name">

input태그에서 label 태그 사용 : label 클릭시 input에도 적용됨

<input id="sub" type="checkbox">
<label for="sub">Subscribe</label>

미리보기

Subscribe