HTML/CSS - 꿀팁(Tips)

1. VSCode를 사용한다면

- html파일을 생성한 후 !(느낌표)만 입력하고 엔터를 치면 기본 html 형식이 자동 생성된다.

 

2. BEM(Block Element Modifier): CSS에 가독성을 주는 표현법 

- 자식 엘리먼트를 나타내는 표현법(부모엘리먼트 이름__자식엘리먼트 이름)

- 속성을 나타내는 표현법(엘리먼트명--속성값)

 

* 꿀 Tip - 모든 이름은 class 명이다. 뭐가 id이고 name이고 class인지 CSS를 작성하거나 읽을 때 헷갈리니까 개발자들 사이에서 이미 모든 엘리먼트는 class명을 사용하도록 통일하였다. 

 

3. 웹 폰트를 사용할 때는 link보다 import 형식을 사용하는 것을 권장한다.

 

4. script 태그는 body 태그를 닫기 직전 부분에 삽입되어야 한다.

 

5. CSS를 작성하기 전에 반드시  reset CSS를 삽입한다. (구글에 검색하면 나온다.)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

 

6. 가독성을 위해 다수의 CSS파일을 만들어 사용한다. 

- 각 화면에 필요한 CSS를 각각의 파일로 정리한다.

- 각 화면에 공유되어 사용되는 components가 있다면, 이 또한 하나의 CSS파일로 정리한다.

- style.css라는 이름의 CSS파일에는 모든 화면에 공통으로 적용될 CSS만 남겨놓는다. 

 

7. CSS 적용 조건문 :not selector

- 특정 엘리먼트에 대해서 CSS를 적용하고 싶지 않을 때, 사용할 수 있는 것이 :not 이라는 선택자를 사용한다. 

 

- 위 사진의 코드를 해석하자면, login-form안에 존재하는 input 엘리먼트의 type이 submit이 아닌 경우에만 CSS를 적용한다는 뜻이다. 

 

- 이와 반대의 경우도 적용할 수 있다. 만약, 위와 동일한 조건에서 type이 submit일 때만 특정 CSS를 적용하고 싶다면?

 

developer.mozilla.org/en-US/docs/Web/CSS/:not

:not()

 

8. inherit 속성 값에 대하여

- CSS에는 inherit이라는 속성값이 있다. inherit은 상속이라는 의미로 해당 CSS에 대해 부모 엘리먼트와 동일한 속성값을 갖도록 한다.

  

 

9. form태그에서 GET과 POST 메소드의 차이점

1) POST: 백엔드(서버)에게 데이터를 전송할때 사용하는 방식.

- 보안성이나 신뢰성을 요구하는 동작에서 사용된다. 

 

2) GET: 전송할 데이터를 url에 포함시켜 넘기는 방식.

- 빠르지만 보안에 취약하고 전송 가능한 데이터의 길이도 제한적이다. 

- input 태그의 name의 속성값이 매개변수로 전송할 데이터를 url에 표시한다. 

 

 

10. VSC 단축키를 이용하여 html구조 만들기 

 

nav>ul>li*4>a 이렇게 쓰고 엔터를 치면 아래 사진과 같이 자동으로 생성된다. 

 

 

 

11. box-sizing: border-box;

 

- width를 200px로 설정한 div가 있다. 만약, 여기에 padding-left를 50px를 설정하면 div의 전체 크기는 몇일까?

 

- 위의 사진처럼, div의 전체 크기는 250px가 된다. width를 200px로 설정했기 때문에 CSS는 이를 유지하려고 할 것이고 동시에 padding-left를 50px로 부여해야 하기 때문이다. 즉, div의 크기가 늘어나게 된다. 

 

- 이러한 CSS의 특징을 매번 기억해서 사이즈를 계산해야 할까? 이를 해결하는 CSS 속성이 바로 box-sizing이다. 

- box-sizing 속성을 boder-box로 설정하면 크기변경 없이 설정된 크기안에서 적용된다. (아래 사진참고) 

- 위의 사진과 같이, 전체 div의 width는 200px로 고정이되며 크기변경 없이 padding-left가 적용된다. 

 

12. Z-Index

- 엘리먼트의 앞, 뒤 순서를 정할 수 있다. 즉, 레이어의 순서를 정할 수 있다.

 

13. reverse

- 위의 사진에 나와있는 말풍선과 시간의 위치를 바꾸고 싶다면 order 또는  flex-box의 reverse 속성을 이용할 수 있다. 

 

 

1) order 속성을 사용하는 방법 

 

2) flex-box의 reverse 속성을 사용하는 방법 (수평 row-reverse / 수직 column-reverse)

 

[결과]

 

 

14. 이미지의 위치는 고정시키고, 이미지의 크기를 반응형으로 만드는 방법 

- 이미지 태그를 담고있는 컨테이너를 absolute로 만들고, 해당 컨테이너의 부모 엘리먼트를 relative로 만든다.

- vw 또는 vh와 같이 화면의 크기에 따라 비율이 달라지는 단위를 사용하여 이미지의 사이즈를 잡는다. 

- 잘 작동하는지 브라우저의 크기를 조절해가며 확인해본다. 

 

* 그림의 사이즈를 반응형으로 만들기 위해서는 width 또는 height 둘 중 하나만 vw 또는 vh로 설정해야 한다. 그렇게 해야 다른 속성(width 또는 height)의 비율이 자동으로 조정된다. width만 잡아두는 것을 추천한다.