[TIL] 220926 HTML/CSS 기초

sun_U·2022년 9월 26일
0

TIL

목록 보기
1/21
post-thumbnail

[코드잇] HTML/CSS 시작하기 완강

클래스(class)

  • 일종의 이름
  • <태그 class="클래스명">
  • .클래스명 {}
  • <태그 class ="클래스명1 클래스명2"> 가능
  • 클래스명 중복 가능

아이디(id)

  • <태그 id="클래스명">
  • #클래스명 {}
  • 하나의 태그에 여러 아이디 불가능
  • 아이디명 중복 불가능

⇒ 여러 요소를 스타일링 하고 싶으면 class, 한 요소만 스타일링 id

태그

  • 요소들 영역 나누기
  • 내용을 새로운 단독 줄로 사용
  • .css 로 css만 따로 작성 가능
  • <head> 태그 내 <link href="css파일 경로" rel="stylesheet">

스타일을 적용하는 방법

  1. <style> 태그
  2. 본문 태그 내에서 <태그명 style="속성1: 속성값; 속석2: 속성값;">
  3. 외부 CSS 파일 + <link> 태그

코멘트

  • HTML 파일 : <!-- 주석 -->
  • CSS 파일 : /* 내용 */
  • 단축키 : Ctrl + /, 여러줄 Ctrl + Shift + /

도움되는 웹사이트

  • Google
  • stackoverfolow
  • jsfiddle.net

텍스트 색

  • color: 색 이름;
  • color: rgb(r값, g값, b값);
  • color: hex값;

기타 속성

  • font-weight : 폰트 굵기, 100부터 900까지 100단위로, normal(400), bold(700)
  • text-align : 텍스트 정렬, left, right, center
  • text-decoration : underline, overline, line-through, none 등

가운데 정렬

  • 안되는 경우, 해당 영역의 범위 확인하기, a태그의 경우, 딱 글자만큼의 공간을 가짐.

폰트 크기

  • 절대적 - px, pt
  • 상대적 - em, % (부모 요소 기준)

줄 간격

  • line-height

기본 폰트 설정

  • Serif
    • Times New Roman
    • 궁서체
  • Sans-Serif
    • Arial
    • 굴림체
  • Monospace (모든 글자폭 같음)
    • Courier
    • Courier New
  • Cursive (필기체)
  • Fantasy (그 외)
  • font-family : "폰트명", "제2의 폰트", 폰트종류; - 폰트명 사용, 없으면 제2의 폰트, 이것도 없으면 폰트종류 중 하나 사용

구글 폰트 사용

  • fonts.google.com
  • 링크 태그 복사해 <head> 태그에 넣고, 적용할 부분에 font-family 로 불러오기

폰트 파일 사용

@font-face {
	src: url("경로/폰트명");
	font-family:"폰트 이름 주기"
}

span 태그

  • 요소들을 묶어줌
  • 기존의 위치에 영향을 주지 않음

여행 페이지 만들기

  • CSS 파일을 따로 만들어 link로 연결해주었다.
  • 이미지의 경우 페이지 크기를 기준으로 하는 %로 적용하니 화면 크기를 줄였을 때도 보기가 좋았다.
profile
Data Engineer AI/ Metaverse :)

0개의 댓글