HTML, CSS (1)

HTML, CSS (1)

2022. 9. 23. 19:16ㆍ프로그래밍/HTML & CSS

emmet 한국어 설정하기

vscode 에서 html 파일에 ! 를 작성하면 html 기본 구조를 자동으로 완성해준다.

이 때, lang="en" 으로 작성되어져 있는 경우, 해당 html 을 읽을 때 한국어로 번역할 것인지 묻는 창이 계속 뜰 수 있기 때문에

lang="ko" 로 자동완성 되도록 settings.json 에서 아래의 코드를 추가해 주는 것이 좋다.

"emmet.variables": {
    "lang": "ko"
},

CSS 선택자는 오른쪽부터 읽기

아래 코드에서 li:nth-child(4) 를 찾아보면 list 중에서 네번째 요소인 item4 일 것 같지만, 사실 li:nth-child(4) 선택자인 요소는 없다.

해당 선택자를 오른쪽에서부터 읽어보면 네번째에 있는 요소 중에서 li 태그인 요소를 찾는다.

하지만 선택자에 만족하는 요소는 존재하지 않는다.

div 태그는 순서상 4번째에 있긴 하지만 li 태그가 아니고,

item4 텍스트를 가진 li 태그는 4번째가 아니라 5번째 순서에 존재하기 때문이다.

선택자를 읽을 때에는 오른쪽에서 부터 읽어야 헷갈리지 않을 수 있다는 것을 기억하자.

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <div>divItem</div>
  <li>item4</li>
</ul>

기본 값의 중요성

css 속성에 기본 값이 아닌 다른 속성을 작성할 경우, 나중에 초기화하기 위해서는 기본 값을 다시 작성해야 한다.

기본 값을 모르는 경우 다시 되돌리기가 불가능하다.

자주 쓰는 기본 값은 외워두는 것이 좋다.

default {
  width: auto;
  height: auto;
  position: static;
  float: none;
  flex-grow: 0;
  flex-shrink: 1;
}

border 의 색상

테두리 속성인 border 는 해당 요소의 color 에 영향을 받는다.

border-color 가 정의되지 않은 채로 아래 코드가 적용되면 border 의 색상은 red 가 된다.

.list {
  color: red;
  border: 10px solid;
}

margin 중복(margin 병합, margin-collapse)

형제요소끼리 margin 의 위/아래가 만나는 경우 마진 중복이 발생한다.

왼쪽/오른쪽이 만나는 경우에는 발생하지 않는다.

부모요소의 margin-top 과

자식요소의 margin-top 이 만나는 경우 마진 중복이 발생한다.

부모요소의 margin-bottom 과

자식요소의 margin-bottom 이 만나는 경우 마진 중복이 발생한다.

lorem

lorem[숫자] 를 작성하면 숫자의 수 만큼 의미가 없는 단어의 묶음을 생성한다.

말 줄임표 만들기

.text {
  overflow: hidden;
  white-space: nowrap; /* 줄바꿈을 안한다. */
  text-overflow: ellipsis; /* 말줄임표 */
}

img 태그

이미지 태그는 인라인 요소이기 때문에, display: block; 속성을 적용하는 것이 좋다.

또한 대체텍스트인 alt 속성을 반드시 작성해야 한다.

HTML/CSS 코드 컨벤션

HTML 과 CSS 를 작성할 때에는 웬만하면 작은따옴표 말고 큰따옴표를 사용하는 것이 좋다.

또한 카멜 케이스(camelCase)가 아니라, 대시 케이스(camel-case) 또는 스네이크 케이스(camel_case) 를 사용해야 한다.

gap

CSS 에서 flex 를 사용하는 경우,

요소들 사이에 여백을 줄 때에 gap 속성을 사용하는 것이 간편한 방법이다.

그라데이션

CSS 에서 그라데이션을 추가할 때에는

배경 색상이 아니라 배경 이미지 속성에서 설정해야 한다.

브라우저가 그라데이션 이미지를 그려서 보여주는 것이기 때문이다.

div {
  border: 3px solid red;
  width: 200px;
  height: 120px;
  background-image: linear-gradient(180deg, red, blue); /* 180 도가 기본 각도이다. */
  background-size: cover;
  text-indent: -100px; /* alt 속성 대신 글자 숨기기 */
  color: red;
}

float 속성을 이용해 배치하기

float 를 사용할 때에는 항상 해제(clear: both;) 를 함께 적용해야 한다.

/* 공통 스타일 */
.clearfix::after {
	content: "";
	display: block;
	clear: both; /* 해제! */
}

.container {
	background-color: orange;
}

.item {
	width: 120px;
	height: 70px;
	border: 3px solid;
	float: left; /* float 를 사용하면 항상 해제를 사용해야 한다. */
}

...

<div class="container clearfix">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>