Web Tech/HTML&CSS

[HTML] HTML, CSS 기초 내용

vinedpillar 2022. 5. 3. 01:14

HTML이란?

  • HyperText Markup Language의 약자
  • 웹페이지 내용과 뼈대를 정해진 규칙대로 기술하는 언어
  • 어떤 웹페이지가 어떤 내용을 가지며 어떻게 조직할 것인지를 지정하기 위한 언어
  • 컴퓨터에게 특정 데이터 처리 절차를 명령하는 언어가 아니기 때문에 프로그래밍 언어에 속하지 않음

HTML 기본 구조

  • 태그(<>)들의 집합
  • .html 확장자 사용
  • <html>, <head>, <body> 구조를 가짐
    • head 부분: 주로 포맷, 사이트 이름, 링크 등의 내용이 들어감
    • body 부분: 웹사이트에서 보여지는 내용이 들어감
  • 부모 안에 자식이 형성되는 트리구조를 띄고 있음
  • 시작 태그와 종료 태그가 서로 맞아야 함
    (종료 태그 없이 단독 태그로 쓰이는 태그들도 있음)
  • 자주 사용하는 HTML 태그
    • Division: 영역 구분 <div></div>
      (한 줄 차지)
    • Span: 영역 구분 <span></span>
      (컨텐츠의 공간만큼 차지)
    • Image: 이미지 삽입 <img>
    • Link: 링크 <a></a>
    • List: 리스트 <ul>, <ol>, <li> 
    • Input(Text, Radio, Checkbox): 사용자 입력 도구 <input>
    • Multi-Line Text Input: 장문 입력 상자 <textarea></textarea>
    • Button: 버튼 삽입 <button></button>

 

 

CSS란?

  • Cascading Style Sheets의 약자
  • HTML이 어떻게 표현되어야 하는지 지정하기 위한 언어
  • 컨텐츠의 배치와 위치 조정하여 웹페이지를 꾸미는데 사용
  • 텍스트를 강조하거나 밑줄을 치는 등, 타이포그래피도 조정 가능
  • CSS를 통해 정보의 레이아웃을 최적화함으로써 정보 전달력을 끌어올리고, 컨텐츠의 가독성을 향상시킬 수 있음
  • 사용자 인터페이스(UI)를 효율적으로 구성함으로써 더 나은 사용자 경험(UX)를 제공하기 위해 사용됨

CSS 스타일링 방법

  • CSS의 추가
    • 헤더 부분에 파일 링크를 추가하여 연결
      Ex. <link rel=“stylesheet” href=“파일명.css”/>
  • CSS 셀렉터
    • html 태그에 고유값을 부여하여 해당 영역만 조정할 수 있도록 셀렉터 지정 
    • Id 부여
      • 문서 내에 유일한 개체를 정의하기 위한 셀렉터
      • 특정 요소에 이름을 붙이는데 사용됨
      • #으로 요소 선택
    • class 부여
      • 문서 내에 동일한 값이 많이 사용되는 개체를 정의하기 위한 셀렉터
      • 스타일을 분류하기 위해 사용
      • .으로 선택함

 

텍스트 꾸미기

  • 색상
    • color: 글자의 색상을 변경하는 속성
      HEX(16진수값), 색상의 이름을 속성값으로 사용
      (ex. color: #113123, color: red)  
    • 배경, 테두리, 면 색상 등도 가은 방식으로 변경할 수 있음
  • 글꼴
    • font-family: 글자의 글꼴을 변경하는 속성
    • Fallback 기능을 사용하여 폰트가 없을 때 값을 미리 지정해놓을 수 있음
      (ex. Font-family: “SF Pro KR”, “MalgunGothic”, “Verdana”;)
    • 웹 폰트 기술을 통해서 현재 설치되지 않은 글꼴도 적용할 수 있음
      (구글 폰트에서 다양한 폰트 제공 중)
  • 크기
    • font-size: 글자의 크기를 변경하는 속성
    • 글자의 크기는 절대 단위와 상대 단위로 지정할 수 있음
    • 인쇄물 같이 기기나 브라우저 등에 영향을 받지 않는 절대 크기로 사용하는 경우 절대 단위 사용 
    • cm, mm, in, px, pt 등
    • 일반적인 경우에는 상대 단위를 주로 사용
    • 보통은 rem을 주로 사용하며, em은 계산이 어려우므로 잘 사용하지 않음 
    • 화면 너비나 높이에 따른 상대적 크기가 중요한 경우 vw나 vh등의 값을 많이 사용
      • %: 기본 크기에서 비율로 조정
      • em: 부모 엘레먼트의 폰트 크기와 비례
      • rem: 루트 폰트 크기와 비례하여 사용
      • ch: 폭 기준으로 비례
      • vw: 폭의 1% 값
      • vh:  길이의 1% 값
    • 반응형 웹의 경우
      • 반응형 웹은 너비에 따라 유동적인 레이아웃이 적용되는 사이트를 뜻함
      • 각기 다른 디바이스나, 보기 모드에서는 각각 크기 별로 CSS를 달리 적용해야 함 
  • 정렬
    • text-align: 가로로 정렬할 경우 사용
      (left, right, center, justify 등의 속성값 사용) 
    • vertical-align: 세로로 정렬할 경우 사용
      (부모 요소 display속성이 반드시 table-cell이여야만 함)
  • 기타 스타일링
    • 굵기: font-weight
    • 밑줄: text-decoration
    • 자간: letter-spacing
    • 행간: line-height

 

현재의 HTML, CSS 문법

  • 현재는 관심사 분리라는 패러다임을 적용하고 있기 때문에 HTML에서 스타일링 관련된 태그는 더 이상 사용하지 않기로 하고, CSS로만 컨트롤하기로 함
    (ex. html 문서에서는 더이상 <center>와 <font> 태그를 사용하지 않고 CSS로 컨트롤)

'Web Tech/HTML&CSS'의 다른글

  • 현재글[HTML] HTML, CSS 기초 내용
댓글

티스토리툴바