css 기초

css 속성 종류

 

 

background-color은 background의 하위 속성이다 .

background의 하위 속성에는 여러가지가 있다. 아래 링크 참고

https://designer-ej.tistory.com/entry/CSS-background-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%ACcolor-image-position-repeat-%EB%93%B1

[CSS] background 속성 정리(color, image, position, repeat 등)

 

 

 

 

 

 

 

CSS 스타일을 적용하는 방법 3가지

• html 태그에 직접 적용하는 인라인 스타일
• html 파일 안에 <style> 요소를 만들고, 그 안에 css 스타일을 작성하는 내부 스타일 시트
  (html 전체에 특정 스타일을 적용시킬 때 사용)
• 별도의 css 시트를 만들어 html 파일에 연결하는 외부 스타일 시트
  (link.css + tab 사용 팁)

 

 

 

id와 class의 차이점

css에서 html 요소를 선택하여 특정 요소에 스타일을 지정할 수 있다.

요소를 선택(select)하기 위해 id와 class를 사용한다.

id는 요소에 고유한 이름을 붙이는 반면, class는 동일한 기능을 하는 여러 요소를 한 단위로 묶는 역할을 한다.

id는 하나만 지정할 수 있고, class는 여러 개로 지정할 수 있다.

id와 class가 한 요소에 함께 지정될 수 있다.

id는 css에서 #idname{ }의 형태로 사용하고, class는 .classname{ }의 형태로 사용한다.

 

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

 

 

fallback

지정한 font-family가 사용자의 컴퓨터에 미설치되어 있다면, 다른 폰트를 사용할 수 있도록 아래와 같이 설정

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

웹 폰트 기술로 사용자가 폰트를 다운로드 하게 링크를 전달하는 방법도 있다.

 

 

 

 

 

텍스트꾸미기 속성

• color: 텍스트 색상
• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height
• 가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.

 

 

 

 

 

 

 

단위

https://urclass.codestates.com/a04359c5-2e3a-4887-bdaf-9e4095d86286?playlist=1718 

 

 

속성값의 단위, 절대단위와 상대단위

css속성값 단위의 종류는 두 가지가 있다. 절대와 상대 단위.

절대단위(absolute)는 px, pt 등으로, 상대적 기준 없이 절대적

상대단위(relative)는 em, rem, %, vw, vh 등으로, 설정한 기준에 따라 유동적으로 바뀜. 상대단위를 사용하면 브라우저가 기준 대비 px값으로 계산 해서 반영함.

 

vw, vh

웹 사이트의 보이는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height를 뜻하며, 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻합니다.

 

em과 rem의 차이

root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

 em, rem은 font-zize 속성의 상대단위로, 1em은 font-sixe의 속성값 *1이다.

예를 들어 font-sixe가 4px을 상대로 5em이라면 4px*5 = 20px이다.

 

 

 

 

 

 

 

block, inline-block, inline

block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다.

<span> 요소와 같은 inline 박스는 block 박스와 달리 width, height 속성이 사용이 불가능합니다. inline 박스의 너비는 콘텐츠가 차지하는 너비가 결정하게 됩니다.inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가집니다.

 

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능
margin, padding 값	가능	가능	좌우 margin 가능 padding 가능
요소	div , p, ul, ol, li. h1~h6, form, header, nav, footer, section, article, aside	img, input, button	span, a

 

 

 

 

 

{box-sizing: border-box;}

content-box 박스의 크기를 계산하면, content의 크기 + padding의 크기 + border의 두께 로 계산되어

수치보다 실제 차지하는 크기가 커진다. border-box로 계산하면 padding과 border의 크기를 고려하여 계산해줌

• content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

박스 사이즈 측정의 기본값과 border-box 계산법

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

 

 

 

 

 

 

 

 

실습

p {
  border: 1px solid red;
}

• 테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
• 테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다.
• 박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background 속성이 불투명해야 합니다.

p {
   border: 5px dotted red;
   border-radius: 5%;
   box-shadow: 10px 5px 10px;
  }

 

 

 

 

 

 

margin을 음수로 적용하면 다른 엘리먼트와 겹치게 하는 것도 가능합니다.

콘텐츠의 크기가 박스의 크기를 초과할 경우, overflow: hidden;를 사용하면 초과한 컨텐츠를 보이지 않게 할 수 있다.

p {
  height: 40px;
  overflow: auto;
}