HTML/CSS 기초

이진이·2023년 8월 13일
CSShtml웹 기초
post-thumbnail

HTML

HTML : Hyper Text Markup Language

  • 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어

    • 눈에 보이는 정보 : 텍스트, 이미지 등

  • 네비게이션, 로그인, 베너 등 영역을 나누는 역할

  • 시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고, 새로운 언어가 생기기도 함

HTML 태그 구성 요소

  • 태그명 : HTML이 갖고 있는 고유의 기능

    • <열린태그></닫힌태그> 형태로 입력
    • 닫힌 태그가 없는 태그도 몇 있음

  • 컨텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물

  • 속성 : 태그가 가지는 추가 정보

  • 속성 값 : 어떤 역할을 수행할지 구체적인 명령

HTML 문서 기본 구조

  • <!DOCTYPE html> html5라는 신조어. 문서를 선언하는 태그
  • <html></html> html 문서의 시작과 끝을 의미
  • <head></head> 웹사이트의 간단한 요약 정보를 담는 영역
    • 웹 사이트에 노출되지 않는 정보
  • <body></body> 웹사이트에서 눈에 보이는 정보를 담는 영역
    • 텍스트, 이미지 등 출력되는 정보
  • <meta charset="UTF-8"> 모든 문자를 웹 브라우저에서 깨짐 없이 표시하겠다는 의미
    • 문자 인코딩을 UTF-8로 하겠다.
  • <title></title> 웹사이트 탭에 나타나는 제목을 적는 태그

기본 태그

  • <h1></h1> : heading의 약자로 제목이나 부제목을 표현
    • h1~h6 까지 있음 ⇒ 숫자는 정보의 중요도를 나타냄
    • h1은 가장 중요한 정보이므로, 하나의 html문서에 한 번만 사용 됨.
  • <p></p> : Paragraph의 약자로 본문의 내용을 표현
    • 웹 사이트의 중요 정보를 담는 태그
  • <ul></ul> : 순서가 없는 리스트 생성
    • 메뉴 버튼 만들 때 사용 됨
  • <a href="https://naver.com" target="_self"></a> : 클릭했을 때 다른 웹 페이지로 이동
    • href 속성 : 연결할 웹페이지의 주소
    • target : 웹페이지를 연결하는 방식 ex) _blank : 새 창을 열어서 이동
  • <img src="logo.png" alt="회사로고"> : 이미지를 삽입. 닫힌 태그 없음
    - src 속성 : 삽입할 이미지 파일 경로
    - alt 속성 : 웹사이트가 이미지를 출력하지 못할 경우 대체할 텍스트, 웹 접근성을 위해 필요
    - width, height 속성 : 이미지의 크기 지정

구조를 만드는 태그

목차

  • <header></header> 웹 사이트의 머리글
  • <nav></nav> 메뉴 버튼을 담는 공간(navigation)
    • 주로 <ul>, <li>, <a> 태그와 함께 사용

본문

  • <main role="main"></main> 문서의 주요 내용
    • role=”main” 속성 : main 역할을 한다는 사실을 표현함. 반드시 입력
  • <article></article> 문서의 주요 정보를 담고 구역을 설정하는 태그
    • 태그 내에 구역을 대표하는 타이틀 <h>태그가 존재해야 함

부록

  • <footer></footer> 가장 하단에 들어가는 정보를 표기할 때 사용

임의의 공간

  • <div></div> 작은 구역을 나눌 때 사용

태그의 성격 : block 과 inline 요소

두 요소를 구분 짓는 세 가지 주요 특징

  1. 줄 바꿈 여부
  2. 가로 세로 공간 지정 가능 여부
  3. 상 하 배치 여부

block 요소

  • y축 정렬 형태로 출력(줄 바꿈 O)
  • 공간을 만들 수 있고, 상하 배치 작업 가능
  • ex) <div>, <p>, <h1> …

inline 요소

  • x축 형태로 출력(줄 바꿈 X)
  • 공간을 만들 수 없고, 상하 배치 작업 불가
  • ex) <a>, <span>



CSS

CSS : Casting Style Sheet

  • 정보(HTML)와 디자인(CSS)의 분리
  • 문서의 레이아웃과 스타일 정의
  • HTML로 작성된 정보를 꾸며주는 언어

문법

  • 선택자 : 디자인을 적용할 HTML 영역
    • ex) 태그명, class명, id명
  • 속성 : 어떤 디자인을 적용할지 정의
  • 속성 값 : 어떤 역할을 수행할지 구체적으로 명령
    - ⚠️세미콜론(;) 필수 입력

연동 세 가지 방법

  1. Inline : 태그 안에 직접 원하는 스타일 적용

  2. Internal : <head>에 <style> 태그 안에 넣기

  3. External : 외부 파일(.css)로 만들어서 <link> 태그로 불러오기

    • <link rel="styledsheet" href="style.css" />
    • 각각의 문서 안에 따로 관리하여 가독성이 높고 유지-보수가 쉬움

CSS 선택자

: HTML의 어떤 요소에 CSS를 적용할 것인가

  • Type : 태그

  • Class : 태그 별명

    • .className {…}

  • Id : 태그 이름
    - #idName {…}

부모 자식 관계

: 특정 태그 안에 다른 태그를 포함하는 관계

  • 감싸는 태그를 부모, 포함되는 모든 태그를 자식이라고 한다.
  • 자식이 여러 개이면 자식들끼리는 형제 관계이다.
  • 부모의 CSS 속성은 자식이 상속 받는다.
  • 정확한 CSS 작성을 위해서는 부모를 구체적으로 표기
    • header h1 {...}
    • 부모 자식 관계는 띄어쓰기로 표현
  • 부모에게 상속 받은 CSS 속성보다 자식 CSS 속성이 우선순위가 더 높다.

캐스케이딩

: CSS의 우선순위

캐스케이딩을 결정하는 세 가지

  • 순서 : 나중에 적용한 속성 값의 우선순위가 높음
  • 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음
  • 선택자 : id > class >type // Inline > Internal > External

연동 방식 > 선택자 > 디테일 > 순서


CSS 주요 속성

  • width, height : 선택한 요소의 너비와 높이 설정

    • 고정 값(px), 가변 값 (%)
    • % : 부모의 크기가 기준이 된다.

  • font : 폰트 관련 설정

    • font-family 서체(폰트) 지정. 입력한 순서대로 우선순위 적용. sans-serif를 마지막에 넣어 디폴트 값으로 사용하는 것을 권장
    • font-weight 폰트 굵기 지정. 100~900 사이의 숫자 또는 bold, light 등

  • border : 테두리 속성. 다음 세 가지를 띄어쓰기로 연결해서 사용 가능

    • border-style 테두리 디자인. 실선(solid), 점선(dotted) 등
    • border-width 테두리 굵기
    • border-color 테두리 색상

  • background 배경 설정. 띄어쓰기로 속성 값 연결해서 사용 가능

    • background-image : 배경을 이미지로 설정. url(이미지 경로); 를 값으로 준다.
    • background-repeat : 이미지 반복 효과. repeat-x, repeat-y, no-repeat
    • background-position : 공간 안에서 이미지의 좌표를 변경할 때 사용
profile
이진이
프론트엔드 공부합니다. 블로그 이전: https://jinijana.tistory.com
이전 포스트

웹 기초

다음 포스트

[CSS] CSS 애니메이션

0개의 댓글