HTML/CSS 기본 개념

강정우·2022년 7월 3일
0

HTML, CSS

목록 보기
1/27
post-thumbnail

HTML / CSS

1. 웹 구성요소

  • 프로그래밍이란 : 컴퓨터와 소통하는 방법을 의미, 컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능, 웹 개발을 하기위한 언어로 브라우저와 소통
  • 웹 사이트 제작시 고려사항
  1. 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공수기표준이나 기술 규격
  2. 웹 접근성 : 장애 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식
  3. 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

2. HTML 주요태그

  • HTML이란 : Hyper Text Markup Language라고 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
  • HTML 변화 : 시간이 지남에 따라 자주사용되지 않은 용어들은 사라지고 시대에 맞추어 신조어 등장
  • <!DOCTYPE html> : HTML5라는 신조어로 문서를 선언하는 태그
  • <HEAD> : 요약태그
  • <BODY> : 사용자 눈에 보이는 태그
  • <"meta charset="UTF-8"> : UTF_8은 유니코드를 나타냄. 모든 문자를 웹에서 깨짐없이 나타내겠다는 뜻.
  • <h1> : 보통 html문서에 한 번만 사용됨.
  • <p> : paragraph의 약자로 본문 내용을 표현

3. 공간을 만들 때 사용하는 태그

  • HTML 태그 구성 요소 : 목차, 본문, 부록

    1) header

  • <header> : 웹사이트의 머리글을 쓰는 태그
  • <nav> : ul, li, a 태그와 함게 사용

    2) main

  • <mian> : role="main" 이라는 속성을 필수로 입력해야한다.
  • <article> : 주요 이미지나 텍스트등의 정보를 담고 구역을 설정하는 태그 또한 반드시 h1 태그가 하나는 들어가줘야 함!!!!!!!
  • <footer> : 가장 하단에 들어갈 정보

4. HTML의 2가지 성격

  • block 요소 : y축 방향 정렬(header, div정도), 공간을 만들 수 있다, 상하 배치작업이 된다.
  • inline 요소 : x축 방향 정렬(a), 공간을 만들 수 없다!, 상하 배치작업이 불가능!

5. CSS 주요 속성 살펴보기

  • CSS란 : Cascading Style Sheet로 정보와 디자인을 분리 HTML로 작성된 정보를 꾸며주는 역할.
  • 문법
선택자 {속성 : 속성값;}		// 마지막은 항상 ;으로 마무리
  • 스타일 적용 방법들
  1. inline 방식 : 속성 태그 안에
  2. internal 방식 : body안에 style 태그를 만들어서
  3. external 방식 : head에 link 태그를 만들어서

6. 선택자(부모자식관계)

  • 부모를 구체적으로 표기함으로써 세부적으로 표시 가능
    EX) html -> p , footer -> p 이렇게 p태그가 2개가 있다면 footer p 이렇게 공백을 넣어줌으로써 html과 footer에 있는 p가 구별 가능함.

7. 캐스케이딩

  • 캐스케딩이란 : CSS의 우선순위를 결정하는 세가지 요소
    1. 순서 : 나중 순서가 적용
    2. 디테일 : 더 구체적으로 작성된 선택자의 우선순위가 높음
    3. 선택자 : style > id > class > type 순으로 우선순위가 높음

8. CSS 주요 속성

  • .font-family(sans-serif) : 브라우저마다 지원하는 포트가 다르기때문에 반드시 마지막에는 sans-serif를 지정해줘야한다. 이 sans-serif는 모든 브라우저에서 지원하는 폰트이기 때문에 보험으로 하나 들어놓는 것.
  • .font-weight : 100~900까지 100단위로 점점 두꺼워짐
  • border : solid는 실선 dotted는 점선 또한 border는 그냥 띄어쓰기로 구분함
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글