기본 개념.

개발집사 2022. 6. 30. 10:04

텍스트의 정렬

가로정렬

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; } //양쪽 정렬

내용이 든 종결 블록 요소에만 적용된다.(<p>)
인라인 요소에 적용되지않으며, 구조블록 요소에는 제대로 적용되지 않는다.
구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다.

세로정렬

vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.

글자 색을 바꾸기 위한 속성은 무엇인가요? color
배경 색을 바꾸기 위한 속성은 무엇인가요? background-color
background 속성과 background-color 속성은 어떻게 다른가요?

background-color : 단순히 색깔 옵션만 부여해서 사용할 수 있음.
background : 다른 color / image / repeat / attachment / position과 
background 옵션을 추가적으로 부여할 수 있다.

Selector

전체 selector

*{
	margin: 0px;
}

태그 selector

<h4 id="navigation-title">This is the navigation section.</h4>

h4{
	color: black;
    }

id selector(id: 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름)

#navigation-title {
  color: red;
}

class selector

.menu-item {
  text-decoration: underline;
}

text 꾸미기

굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

절대단위와 상대단위

절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages

block vs inline vs inline-block

	block	inline	inline-block
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

border

p {
  border: 1px solid red;
}

테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? solid 값을 dased로 변경
테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? border-radius
박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다. -> box-shadow

margin

p {
  margin: 10px 20px 30px 40px;
}

각각의 값은 top, right, bottom, left로 시계방향입니다.

p {
  margin: 10px 20px;
}

값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px 입니다.

* 위와 같은 규칙은 padding에도 동일하게 적용됩니다.
재미있게도 바깥 여백에는 음수 값을 지정할 수 있습니다. 여백에 음수 값을 지정하면 다른 엘리먼트와의 간격이 줄어듭니다. 극단적으로 적용하면, 화면(viewport)에서 아예 사라지게 하거나, 다른 엘리먼트와 겹치게 만들 수도 있습니다.

overflow

스크롤 표시
overflow: auto -> 콘텐츠가 넘치는 경우 스크롤을 생성
overflow: hidden -> 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때
overflow-x, overflow-y : 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정

여백과 테두리 두께를 포함해서 박스 크기를 계산

* {
  box-sizing: border-box;
}