HTML + CSS

MoonDD·2023년 7월 24일
CSShtml
0

웹프로그래밍 기초다지기

목록 보기
1/4

입사 후 한달동안 웹프로그래밍의 기본기를 다지는 시간을 가졌다.
html css js jsp는 직접적으로 사용할 일이 없어서 따로 공부한 적이 없었다.
그러다 나중에 주니어, 시니어가 되어 후배가 물어봤을 때 나도 이거 잘 모르는데? 하기는 너무 민망할 것 같아서 한달동안 카테고리별로 1권씩해서 4권의 책을 공부했다.
(실제로 이제 개발공부를 시작한 사촌오빠가 물어봤는데, 좀 더 잘 설명해주고 싶었다.)

커리큘럼은

  1. html+css
  2. js
  3. servlet + jsp
  4. sql + pl/sql

이 순서로 공부했다.

1. HTML 기본 다지기

파일문서는 형식자를 붙인 상태로 저장되는데, 여기서 형식자를 통해 해당 문서가 어떤 프로그램을 사용해서 작성되었는 지를 알 수 있다.

*.html이 붙어있는 파일 또한 파일인데, 이는 웹 브라우저를 통해서 실행되는 웹 문서이다.

기존문서와 다르게 문서를 편집하는 프로그램과 실행하는 프로그램이 다르다.

1-1 HTML

  • HyperText Markup Language의 약자이다.
    • HyperText는 링크를 통해서 사이트를 옮겨다닐 수 있는 문자를 말한다.
    • Markup은 태그를 이용해서 해당 부분이 어떤 기능을 하고 있는 지 알 수 있는 것을 의미한다.

모든 웹 브라우저에서 HTML이 공통적으로 적용되기 위해 만들어진 표준 규칙이 HTML5이다.

1-2 HTML 기본 문서구조

특징

  • 태그는 <>를 이용해 구분한다.
  • 태그는 소문자로
  • 여는 태그와 닫는 태그를 구분한다.
  • 들여쓰기를 통해 문서 구조를 파악할 수 있다.
  • 태그는 속성을 이용할 수 있다.

기본 구조

  1. <!doctype> : 문서 유형을 지정하는 선언문
  2. <html> : 해당 문서의 시작과 끝을 표시
    1. <head>
      • 브라우저의 정보를 알려주는 태그
    2. <meta>
      • 문자 세트를 비롯한 문서 정보를 알려주는 태그
    3. <body>
      • 실제 브라우저에서 보여질 내용

2. 텍스트 관련 태그들

2-1 텍스트를 덩어리로 묶어주는 태그

  1. <hn> 태그

  2. <p> 태그

  3. <br> 태그

  4. <hr> 태그
    가로

  5. <blockquote> 태그

  6. <pre> 태그

    텍스트에 사용된 모든 여백과 줄바꿈이 그대로 표현된다.

2-2 텍스트를 한 줄로 표시하는 태그

  1. <q> 태그

    짧은 인용용

  2. <span> 태그

    <div> 와 비슷한 역할이지만 인라인 요소이다. ⇒ div : 레이아웃, 구조를 잡는 역할

  3. <ruby> 태그

    루비주석 추가

효과를 주는 태그

  1. <strong>, <b> 태그

    strong : 중요한 목적을 가지고 굵은 표시

    b: 중요한 목적은 없지만 굵은 표시

  2. <em>, <i> 태그

    이탤릭체

  3. <mark> 태그

    하이라이트

2-3 목록을 만드는 태그

  1. <ul> + <li> 태그

    순서 X

  2. <ol> +<li> 태그

    순서 O

  3. <dl>,<dt>.<dd> 태그

2-4 표를 만드는 태그

  1. <table>, <tr>, <td>, <th> 태그
    • colspan, rowspan 속성
  2. <caption>, <figcaption> 태그
    • aria-describedby 속성
  3. <thead>,<tbody>,<tfoot> 태그
  4. <col>,<colgroup> 태그

3. 이미지와 하이퍼링크

3-1 이미지 태그

사용가능한 이미지 형식

  • GIF
  • JPG/JPEG
  • PNG

이미지 삽입할 수 있는 태그

  1. <img> 태그
    • src 속성
    • alt 속성
    • width, height 속성
  2. <figure>, <figcaption> 태그

3-2 링크 만들기

링크 연결하는 태그

  1. <a> 태그

    • href 속성
    • target 속성
    • usemap 속성

  2. <map>, <area> 태그

    한 이미지에 여러개 링크를 걸 수 있다.

    • shape 속성
    • coords 속성
    • href 속성
    • target 속성

앵커

<a> 태그의 href 속성을 “# +id” 으로 설정하면 같은 문서에 위치하고 있는 해당 id의 단락으로 이동하게된다.

3-3 SVG 이미지

사이즈에 따라 이미지가 깨질 수 있는 비트 이미지와 달리 svg 이미지는 사이즈 변경에도 선명하게 유지되기에 로고나 아이콘에 많이 사용되는 이미지 파일 형식이다.

<script>태그 안에서 modernizer.svg 함수를 이용해서 조건문으로 svg 이미지가 지원되는 지 아닌지에 따라 보여주는 이미지를 다르게 설정해줄 수 있다.

4. 폼 관련 태그들

4-1 폼 만들기

  1. <form> 태그
    • autocomplete 속성
  2. <label> 태그
    • label 태글를 통해서 폼 요소에 레이블을 붙일 수 있다
    • 2가지 방식
      • <label> 태그 안에 폼 요소를 넣는 것
      • <label> 요소와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 id 속성을 이용해 연결해준다.
        • 라디오 버튼이나 체크박스에서 사용하면 텍스트만 터치해도 선택되는 장점이 있다.
  3. <fieldset>, <legend> 태그

⇒ 요즘은 form 태그보다 js 이용을 더 많이 사용한다.

⇒ form의 get/post 사용 목적 좀 더 공부하기

4-2 <input> 태그

<input> 태그

  • id 속성
  • type 속성
  • value 속성
    • value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용됩니다.
      • “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함.
      • “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함.
      • “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함.

input의 type

  1. type=”hidden”
  2. type=”text”
  3. type=”password”
  4. type=”search”,”url”,”email”,”tel”
  5. type=”number”
  6. type=”range”
    • min
    • max
    • step
    • value
  7. type=”radio”,”checkbox”
    • name
    • value
    • checked
  8. type=”color”
  9. type=”date, “month”, “week”
  10. type=”time, “datetime”,”datetime-local”
    • min
    • max
    • step
    • value
  11. type=”submit”,”reset”
  12. type=”image”
  13. type=”button”
  14. type=”file”

4-3 <input> 태그의 다양한 속성

  1. autofocus
  2. placeholder
  3. readonly
  4. required

4-4 여러 데이터 나열해 보여주기

데이터 나열해 보여주는 태그

  1. <select>, <optgroup>, <option> 태그

    여러 옵션 중에서 선택할 수 있는 드롭다운

  2. <datalist>, <option> 태그

여러줄 입력 받기

  1. <textarea> 태그

4-5 기타 다양한 폼 요소들

  • <button> 태그
    • type → submit, reset, button
  • <output> 태그
    • <form> 태그에서 oninput에 output의 결과 계산 방법을 정의해둔다.
  • <progress> 태그
  • <meter>태그

2️⃣ CSS

    1. CSS 기초

      5. CSS 기초

      5-1. 스타일과 스타일 시트

      스타일 형식

      선택자 { 스타일 속성 :  속성값}

      스타일 적용하는 방법

    2. <style> 태그와 </style> 태그 내부에 작성

    3. <link> 태그를 이용하여 외부 CSS 파일과 연결

    4. <body> 내에서 인라인 스타일 적용

      5-2 주요 선택자

      선택자

    • 전체 선택자

      * {
	속성:속성값;
	속성:속성값;
	.
	.
}

    • 태그 선택자

      태그 {
	속성:속성값;
	속성:속성값;
	.
	.
}

    • 클래스 선택자

      .클래스명 {
	속성:속성값;
	속성:속성값;
	.
	.
}
      • 둘 이상의 스타일 적용시 공백으로 구분해서 나란히 적는다.

    • id 선택자

      #id명 {
	속성:속성값;
	속성:속성값;
	.
	.
}

    • 그룹 선택자

      ```css
선택자1, 선택자2, ... {
	속성:속성값;
	속성:속성값;
	.
	.
}
```

      5-3. 캐스캐이딩 스타일 시트

      캐스캐이딩이란?

      Cascading Style Sheet(CSS): 위에서 아래로 흐르는 스타일 시트

      위에서 아래로 흐르는 방식으로 스타일을 적용함으로 스타일간 충돌을 방지하는 방식의 스타일 규칙이다.

      (1) 스타일이 적용되는 방법1 : 스타일 우선순위

      스타일 우선순위

    1. 사용자 스타일 시트의 중요 스타일

    2. 제작자가 만든 스타일 중 !important가 붙은 스타일

    3. 제작자 스타일 시트의 일반 스타일

    4. 기본적인 브라우저 스타일 시트

      ****적용범위 우선순위****

    5. 인라인 스타일

    6. id 스타일

    7. 클래스 스타일

    8. 태그 스타일

      소스에서의 작성되는 순서

    • 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮는다.

      (2) 스타일이 적용되는 방법2 : 스타일 상속

      포함하는 태그 ⇒ 부모 요소

      포함된 태그 ⇒ 자식 요소

      자식 요소에 별도로 스타일이 지정되지 않으면 부모 요소에 있는 스타일 속성들이 적용된다.

      예) body(부모 요소) → h1, h2, h3 .. (자식 요소)

      5-4 CSS3와 CSS 모듈

      CSS3란?

      html5와 같이 표준화된 CSS 규칙이다.

      html5과 다르게 CSS3는 조금씩 계속 변하고 있고 특정 모듈들은 브라우저 별로 규약이 완성되지 않아서 적용되는 게 다르다. 그럴때는 접두사를 사용해서 브라우저별로 속성을 지정해줘야한다.

      이때 -prefix-freeze라는 자바스크립트를 다운받아 연결해두면 편리하다.

6. 텍스트 관련 스타일

6-1 글꼴 관련 스타일

  1. font-family : 글꼴
    • ‘,’으로 구분하여 여러 글꼴 지정 가능. 순차대로 적용후 가능한 글꼴 사용
  2. font-size
    • 단위
      • px
      • em : M의 너비
  3. font-weight : 굵기
  4. font-variant
    • small-caps : 작은 대문자표 표시
  5. font-style
    • italic
    • normal
  6. font
    • font- 로 시작하는 모든 속성을 한번에 묶어 약식으로 표현할 수 있다. 예시 다시 따라해보기
    • font-size와 font-height(줄 간격)는 15px/25px과 같이 슬래시로 연결해 같이 표현하기도 한다.

기본형 기호

  1. | 은 나열한 옵션 중 하나가 값이 되어야한다.

    ex) font-size: 값1 | 값2 | 값3

  2. 속성 값을 나열할 때 키워드는 그대로 사용한다.

  3. 속성 값을 나열할 떄 값이 아닌 유형일때 꺽쇠<>로 감싸서 사용한다.

    ex) font:

6-2. 텍스트 스타일

텍스트 스타일 속성

  1. color
  2. text-decoration: 텍스트 줄 표시
  3. text-transform: 텍스트 대-소문자
  4. text-shadow
  5. white-space
  6. letter-spacing, word-spacing: 텍스트 간격 조절

6-3. 문단 스타일

문단 스타일

  1. direction
  2. text-align
    • justify → 양쪽에 맞춰 문단을 정렬할 경우 text-justify 속성을 이용해서 정렬 시 공백 조절이 가능하다.
  3. text-indent : 텍스트 들여쓰기
  4. line-heiht
  5. text-overflow

6-4. 목록 스타일

목록 스타일

  1. list-style-type
    • 순서 없는 목록 속성값
      • square
      • circle
      • disc
      • none
    • 순서 있는 목록 속성값
      • decimal
      • ….
  2. list-style-image
    • 불릿 대신 이미지 넣기
  3. list-style-position
  4. list-style
    • font-와 비슷

7. 색상과 배경을 위한 스타일

07-2. 배경 색과 배경 이미지

  1. background-color 속성

  2. background-clip 솔성

    배경 적용 범위 조절

  3. background-repeat

  4. background-size

  5. background-position

  6. background-origin

    배경 이미지 배치할 기준 조절

  7. background-attachment

    배경 이미지 고정하기

  8. background

8. CSS 박스 모델

8-1. CSS와 박스 모델

블록 레벨 요소와 인라인 레벨 요소

  • 블록 레벨 요소 태그를 사용해 요소를 삽입했을 때 해당 요소의 너비가 100%인 것을 의미한다. 너비나 마진 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소이여야한다.
  • 인라인 레 요소 줄을 차지하지 않는 요소이다. 화면에 표시되는만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 즉 한 줄에 여러가지 요소가 올 수 있다.

박스모델

박스 모델 구성요소

  1. 컨텐츠 영역

  2. 패딩

    실제 컨텐츠와 박스 영역 사이의 여백

  3. 테두리

    박스의 테두리

  4. 마진

    다른 박스 모델 사이의 여백인

속성

  1. width, height
  2. display
    • block 해당 요소를 블록 레벨로 지정 인라인 레벨 요소도 블록 레벨 요소로 변경할 수 있다.
    • inline 해당 요소를 인라인 레벨 요소로 변경한다. 블록 레벨 요소를 인라인 레벨 요소로 변경할 수 잇다.
    • inline-block 요소를 인라인 레벨로 배치하면서 블록 레벨의 속성을 지정할 수 있다.
    • none visibility:hidden; 과 비슷해보이지만 visibility는 보이지 않을 뿐 공간은 존재하지만 disply:none;은 아예 공간자체가 존재하지 않는다.

8-2 테두리 관련 속성들

테두리 관련 속성

  1. border-style
  2. border-width
  3. border-color
  4. border
  5. border-radius
  6. border-shadow

8-3. 여백을 조절하는 속성들

여백 관련 속성

  1. margin

    속성값 순서 : 상 우 하 좌

  2. padding

    속성값 순서 : 상 우 하 좌

9. CSS 레이아웃

9-1. CSS 포지셔닝과 주요 속성들

박스 너비 기준 정하기

  • box-sizing: content-box width = content width
  • box-sizing: border-box width = content + padding + border

float / clear 속성

  • float → 속성값을 기준으로 정렬되어 배치된다.
    float : left | right | none
  • clear → float 속성을 해제한다.
    clear : none | left | right | both

레이아웃 만들기

  • 콘텐츠 전체를 감싸는 container 요소를 사용한다.
    • contents만 감싸기도 하고 header부터 footer까지 감싸기도 한 것 같다.
  1. header
  2. contents + sidebar → 여기서 side bar를 양쪽으로 만들면 3단이 된다.
  3. footer

배치 방법 지정하기

  • position 속성

    1. static : 문서 흐름대로
    2. relative : 문서 흐름대로 배치하지만 top,right,bottom,left 속성을 이용해 기존 위치를 기준으로 위치 지정 가능
    3. absolute : 부모를 기준으로 위치 지정 ( 부모는 반드시 relative로 설정되어야함)
    4. fixed : 브라우저 기준으로 위치 지정

  • visibility 속성

    • visible
    • hidden
    • collapse

  • z-index 속성

    • 다른 요소를 쌓을때 사용할 수 있다.

9-2. 다단으로 편집하기

단 생성에 관련된 속성

  1. column-width
  2. column-count
  3. column-gap
  4. column-rule
  5. break-after
  6. column-span

9-3 표 스타일

표 스타일

  1. caption-side
  2. border
  3. border-collapse : 테두리 통합, 분리
  4. border-spacing : 셀 테두리 사이 거리 지정하기
  5. empty-cells :빈 셀의 표시 여부 지정하기
  6. width, height
  7. table-layout : 콘텐츠에 맞게 셀 너비 지정하
  8. text-align
  9. vertical-align

3️⃣ HTML + CSS

10. HTML5와 시맨틱 태그

10-1. HTML5 문서

시맨틱 태그

  1. <header> 태그

  2. <nav> 태그

  3. <section> 태그

    ⇒ 내용 구분

  4. <article> 태그

    ⇒ 본문 영역

  5. <aside> 태그

  6. <iframe> 태그

  7. <footer> 태그

  8. <address> 태그

11. HTML5와 멀티미디어

11-1 웹과 멀티미디어

멀티미디어를 직접 재생할 수 없어 외부 프로그램인 플러그인을 적용해서 사용했다.

  1. <object>, <embed> 태그

    외부 파일 삽입하기

11-2 오디오 & 비디오 재생하기

  1. <audio> 태그
  2. <video> 태그
  3. <source> 태그

12. 다재다능한 CSS3 선택자

12-1. 연결 선택자

  • 하위 선택자 section p { color : blue;} 부모 아래에 있는 자식 요소뿐만 아니라 모든 하위 요소까지 적용된다.
  • 자식 선택자 section > p { color : blue;} 부모 바로 아래에 있는 자식 요소만 적용된다.
  • 인접 형제 선택자 h1 + p { text-decoration: underline;} 같은 부모 요소를 가진 형제 요소 중 요소1 다음에 바로 오는 동생 요소2에 스타일을 적용한다. 위 예시에서는 h1의 형제 중 첫번째 p에 스타일이 적용된다.
  • 형재 선택자 h1 ~ p { text-decoration: underline; } 첫번째 요소 뒤에 오는 모든 형제 두번째 요소에 스타일을 적용한다. 위 예시에서는 h1의 형재 중 모든 p요소에 스타일을 적용한다.

12-2 속성 선택자

  • 속성 선택자 a[href]
  • 속성 = 값 선택자 a[target=”_blank”]
  • [속성 ~= 값] class ~= “button” class 속성에서 button이라는 값이 포함 된 요소에 스타일을 지정한다.
  • [속성 |= 값] a[title |= “us] 특정 값이 포함된 속성에 스타일을 적용한다. 이때 값은 한 단어로 일치해야한다.
  • [속성 ^= 값] a[title ^= “eng”] 지정한 값으로 시작하는 속성 값에만 스타일을 적용한다.
  • [속성 $= 값] a[href $= “hwp” 지정한 값으로 끝나는 속성 값에만 스타일을 적용한다.
  • [속성 *= 값] a[href *= “w3”] 값이 어느위치에든 포함되어 있는 속성에 스타일을 적용한다.

12-3 가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스

  1. :link 가상 클래스 선택자

    방문하지 않은 링크

  2. :visited 가상 클래스 선택자

  3. :hover 가상 클래스 선택자

    링크나 이미지를 누르고 있을 때

  4. :active 가상 클래스 선택자

  5. :focus 가상 클래스 선택자

    포커스가 맞춰졌을때( 마우스 커서를 갖다 놓거나 초점을 이동햇을 때)

UI 요소 상태에 따른 가상 클래스

  1. :enabled 와 :disabled 가상 클래스 선택자
  2. :checked 가상 클래스 선택자

구조 가상 클래스

  1. :root 가상 클래스 선택자
  2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자
  3. :nth-of-type(n), :nth-last-of-type(n) 가상 클래스 선택자
  4. :first-child, :last-child 가상 클래스 선택자
  5. :first-of-type, :last-of-type 가상 클래스 선택자
  6. :only-chlid, : onlyp-of-type 가상 클래스 선택자

그 외 가상 클래스

  1. :target

    앵커의 목적지가 되는 부분의 스타일 지정

  2. :not

    특정 요소가 아닐때 스타일 적용

가상요소

  1. ::before, ::after 요소

    내용 앞뒤에 콘텐츠를 추가할 수 있다.

  2. ::first-line 요소와 ::first-letter 요소

13. CSS3와 애니메이션

13-1. 변형

변형을 위한 속성과 함수

  1. transform 속성

  2. translate 변형 함수

    요소 이동시키기

    .photo { transform: translate(50px, 100px); }

  3. scale 변형 함수

    요소 확대/축소시키기

  4. rotate 변형 함수

    요소 회전하기

  5. skew 변형 함수

    요소를 비틀어 왜곡하기

13-2. 변형과 관련된 속성들

  1. transform-origin 속성

    변형 기준점 설정하기

  2. perspective, perspective-origin 속성

    원근감 표현하기

  3. transform-style 속성

    3d 변형 적용하기

  4. backface-visibility 속성

    요소의 뒷면 표시하기

14. 반응형 웹이란?

크롬 디바이스 모드를 사용하면 pc에서도 디바이스 환경을 확인할 수 있다.

14-2 가변 그리드 레이아웃

가변 그리드 레이아웃 만들기

  1. 전체 감싸는 요소 확인하기

  2. 각 요소의 너비 값 계산하기

    (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비 ) * 100

14-3. 가변 레이아웃과 가변요소

가변글꼴

  • em 단위 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받는다.
  • rem 단위 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.

가변 이미지

CSS에서 max-width 속성 값을 100%로 지정한다.

화면의 너비값이나 픽셀 밀도에 따라 태그의 srcset 속성에서 해상도의 이미지를 지정해줄 수 있다.

가변 비디오

CSS에서 max-width 속성 값을 100%로 지정한다.

15. 미디어 쿼리

미디어 쿼리는 CSS3 모듈 중 하나로 브라우저에 접속하는 기기의 종류에 따라 특정한 CSS 스타일을 사용하도록 한다.

미디어 쿼리 구문

@media [only | not] 미디어 유형 [and (조건)]  [and (조건)]

그리드 레이아웃을 기본으로 하여 여유있는 공간에 따라 플랙스 박스를 자유롭게 변형할 수 있다. 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 할 떄 편리하게 사용할 수 있다.

16-1. 플렉스 박스 레이아웃과 기본 속성들

  1. display 속성
display: flex | inline-flex
  • flex : 박스 레벨 요소로 정의
  • inline-flex: 인라인 레벨 요소로 정의

브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙어야 한다.

  1. flex-direction 속성

  2. flex-wrap 속성

    플렉스 항목을 한 줄 또는 여러 줄로 배치하기

  3. flex-flow 속성

    flex-direction + flex-wrap 속성

  4. order 속성

  5. flex 속성

    플렉스 항목 크기 조절하기

16-2. 플랙스 박스 항목 배치를 위한 속성들

  1. justify-content 속성

    플렉스 항목을 주축 방향으로 배치할때 배치 기준을 지정하는 속성

  2. align-items 속성, align-self 속성

    align-itmes ⇒ 교차축을 기준으로 배치 방법을 조절

    align-self ⇒ 특정 플렉스 항목만 배치 방법을 바꿀 수 있다.

  3. align-content 속성

    여러 줄일 때의 배치 방법 지정할 수 있다.

참조 도서
Do it! HTML5+CSS3 웹 표준의 정석

profile
MoonDD
다음 포스트

JavaScript

1개의 댓글

comment-user-thumbnail
happy
2023년 7월 24일

개발자로서 성장하는 데 큰 도움이 된 글이었습니다. 감사합니다.

답글 달기