CSS 기초

moono·2022년 12월 22일
TILhtmlcss

HTML/CSS

목록 보기
2/5

Today's CSS

CSS   기본 개념   CSS Box   CSS Selector


CSS다!! 하고 신났는데 그건 잠깐이였다,,
와 셀렉트 넘나 머리아픈것,,
그리고 예시에 나와있던 사이트 중에 vw 적용된 사례가 있었는데
정말 도무지 이해가 가지 않았따,,😭😭
BUT 라이브세션에서 완전 이해감 홍식님 짱 👍
vm 질문 내용(이해 내용 추가 예정)



웹 페이지 제작 위해 필요한 역량

  • 직관적이고 쉬운 UI 제작은 프론트엔트 개발자의 기본 소양
  • 컴포넌트 기능별로 묶어서 제작
  • 화면의 구성이나 배치(레이아웃 디자인)
  • 타이포그래피와 색상, 정렬이나 배색에 대한 감각
  • UX에 매번 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해보기

CSS

Cascoding Style Sheets
콘텐츠를 적당한 위치에 배치
웹페이지 스타일 및 레이아웃 정의하는 스타일시트 언어
스타일링 도구로 독립적으로 기능하지 않으며 반드시 HTML 이 있어야 함


기본 개념

구성

body {
color : red;
}
  • body : 셀렉터(selector)
  • {} : 선언블록
  • color=red; : 선언
    color : 속성명(property)
    red : 속성값(value)

CSS 파일 추가

HTML 파일에 CSS 파일 연결할 때(다른 파일을) 연결하는 목적의 <link> 태그 사용

<link rel="stylesheet" href="파일명.css"/>
<!-- rel속성: 연결하고자 하는 파일의 역할 / href속성: 파일의 위치-->


스타일링

색상

.box {
	color: #000000  /*글자 색상*/
	background-color: #000  /*배경 색상*/
	border-color: #000  /*테두리 색상*/
}
  • color : 글자의 색상을 변경하는 속성
  • background-color : 배경 색상을 변경하는 속성
  • border-color : 테두리 색상을 변경하는 속성

글꼴

.box {
	font-family: "SF Pro KR", "MalgunGothic", "Verdana"
}
  • font-family : 글꼴 변경하는 속성
  • 글꼴의 이름은 '' 를 붙여서 적용
  • fall back : 사용하려는 글꼴이 존재하지 않거나 디바이스 별로 지원이 안된다면 대비책의 글꼴 추가
    여러 글꼴 사용 원한다면 , 쉼표로 구분하고 입력순으로 fall back 적용
  • 웹폰트 기술 : 사용자의 기기에 설치되어 있찌 않은 글꼴 해결해줌

웹폰트 문제점

네트워크 속도, 웹폰트 용량으로 웹폰트가 적용된 텍스트가 보이지 않는 문제가 발생할 수 있음
참고링크

정렬

  • text-align : 가로 정렬 (left, right, center, justify(양쪽정렬))
  • vertical-align : 세로 정렬
    이 속성은 부모 요소의 display 속성이 반드시 table-cell
    정렬하고자 하는 글자를 감싸는 박스의 높이가 글자보다 커야 적용 가능


절대 단위, 상대 단위

글꼴 크기, 화면 크기 등 크기를 다룰 때 쓰는 단위

절대 단위

기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 항상 고정된 길이를 나타내는 단위

  • px : 픽셀, 크기가 고정된 절대 단위로 사용자 접근성이 불리
  • pt : 포인트,

상대 단위

고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위
em과 rem의 차이 참조링크

  • % : %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환
  • em : 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됨
.content (
  font-size: 14px; // 부모에 기준값 지정
}
.content {
  width: 10em; // 14px(기준값) * 10 로 140px 로 보임 
}

  • rem : 최상위 요소가 font-size 속성값이 됨
    HTML 의 최상위 값은 <html>
html (
  font-size: 16px; // 부모에 기준값 지정
}
.div {
  font-size: 1.5em; // 14px(기준값) * 1.5 로 21px 로 보임 
}

  • ch : 요소 글꼴의 "0" 의 사전 길이(너비)
    만약 20ch 면 0이 스무개 있는 너비
  • vw : (viewport width) 보여지는 화면의 가로값이 100%일때 1vw는 1%
  • vh : (viewport height) 보여지는 화면의 세로값이 100%일때 1vh는 1%


박스

모든 콘텐츠는 각자의 영역을 가지고, 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨

block / inline / inline-block

block

  • 줄 바꿈이 되는 박스
  • inline 요소와 다른 block을 포함할 수 있음
  • 새로운 줄에서 시작
  • body 요소 안에서만 나타날 수 있음
  • 줄바꿈 유발
  • 사이즈 조절 가능
  • 대표 tag : <div> , <p> , <h1>

inline

  • 줄 바꿈 안됨
  • 다른 inline 과 데이터만 포함 가능
    display:block 해도 div 넣을 수 X
  • 문서흐름에서 줄바꿈을 강제하지 않음
  • 사이즈 조절 안됨
    css에서 display:inline-block 하면 할 수 있음
  • 대표 tag : <span> , <a> , <em>

inline-block

  • inline 처럼 줄바꿈 없이 한 줄에 나란히 배치
  • block 처럼 사이즈 조절 가능
  • 대표 tag : <input> , <button> , <select>

classclassclass
줄 바꿈OXX
기본 width   100%   글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용 가능OOX

박스 벗어나는 콘텐츠

박스의 크기보다 콘텐츠의 크기가 더 큰 경우 콘텐츠가 박스 밖으로 빠져나옴

이걸 박스 크기에 맞게 스크롤을 추가하거나 콘텐츠를 안보여 줄 수 있게 만들 수 있음

p {
  height : 40px;
  overflow : auto; /*스크롤 추가 방법*/
  /* ㄴ속성값을 hidden 으로 하면 박스사이즈 만큼만 콘텐츠 보여줌*/
}

박스 크기

여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 법은
모든 요소 선택해 box-sizing: border-box 속성 추가
* 은 모든 요소를 선택하는 셀렉터

* {
  box-sizing: border-box;
}

점수가 높은 스타일 선언

오늘 라이브세션에서 얻은 Tip!

 - !important : 9999999999(무한대)점
 - 인라인 선언 : 1000점
 - id 선택자 : 100점
 - class 선택자 : 10점
 - 태그 선택자 : 1점
 - 전체 선택자 : 0점
 - 상속 : 점수 계산 X
profile
moono
이전 포스트

HTML 기초

다음 포스트

CSS : 셀렉터

0개의 댓글