KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_27일차(HTML/CSS)

자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 27일차

KT 자바교육 후기 (2021-07-22 ~ 2021-12-03) 

2021-08-30 비대면 연장 필수.. (참고, 8월 16일 ~ 9월 3일 비대면 주간, 4단계 거리두기로 인하여)

HTML

---

[오전]

  복습 및 실습 과제

 

---

[오후]

 

CSS 박스 모델

웹 문서에서 내용 배치 시 각 요소를 박스 형태로 구성하는 것 

각 박스 모델은 콘텐츠 영역과 테두리, 여백들로 구성 됨 

CSS를 사용한 레이아웃의 기본 

 

 

 

박스 모델 

실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding),

박스의 테두리(border), 박스 모델 사이의 여백인 마진(margin)등의 요소로 구성 됨

블록 레벨 요소

태그를 사용해 컨텐츠를 추가했을 때 한 줄을 통째로 차지하는 요소 

양 옆으로 다른 요소가 올 수 없음, 너비, 마진, 패딩 이용하여 크기나 위치 지정 가능 

예) div, p, hn, ul, ol, form, table, fieldset, address 

 

 

 

인라인 레벨 요소 

화면에 표시되는 컨텐츠만큼만 차지하고 한 줄을 차지하지 않는 요소

여러 개의 인라인 레벨 표현이 가능

예) img, strong, br, sub, span, input, textarea, label, button

 

 

 

display 속성 

필요에 따라 인라인 레벨과 블록 레벨을 변경할 수 있음

 

① display:block => 해당요소를 블록 레벨로 지정

img같은 인라인 레벨 요소도 블록 레벨 요소로 변경 가능

 

② display:inline => 블록 레벨 요소를 인라인 레벨로 변경

서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시 가능

 

③ display:inline-block => 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성 지정

두 가지 특성을 모두 가질 수 있음

 

④ display:none => 해당 요소를 화면에 전혀 표시하지 않음

공간 조차 차지 하지 않도록 처리. cf)visibility:hidden;

 

 

---

border-style

박스의 테두리 스타일을 지정

 

border-width 

테두리 두께 지정 1px 이나 3px처럼 크기를 직접 입력할 수도 있고,

thin 이나 medium, thick 같은 키워드 중에서 선택가능 한꺼번에 표시할 때 시계 방향으로 적용

 

 

 

border-color 

박스의 테두리 색상을 지정

 

 

 

border 

테두리 스타일, 두께, 생상 등 여러 속성을 동시 묶어 표현 가능 

 

 

 

border-radius 

박스 모서리 둥글게 처리

 

margin

 현재 요소 주변의 여백 

한 요소와 다른 요소 사이의 간격 조절이 가능해짐 

크기나 백분율 등으로 값 지정 가능 

마진 속성 값 개수에 따라 어느 방향에 적용될지 결정 됨

 

 

 

padding

콘텐츠 영역과 테두리 사이의 여백 

테두리 안쪽의 여백 

margin 속성과 사용법이 비슷

 

 

 

box-sizing

요소 배치를 위해 요소의 너비 계산에 이용 

콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성 지정이 가능 

 

 

 

float 

웹 요소를 문서 위에 떠 있는 상태로 만듦 

요소의 왼쪽 구석 혹은 오른쪽 구석에 요소가 배치된다는 것

 

 

clear

한 번 float을 이용해 배치를 결정하면 그 다음에 넣는 요소도 똑같은 속성이 전달됨

따라서 더 이상 유용하지 않다고 알려줄 때 사용

 

 

 

position 

웹 문서 안의 요소들을 자유자재로 배치해주는 속성 

텍스트나 이미지를 나란히 배치하거나 여러 개의 요소를 가로, 세로 원하는 위치에 배치

static을 제외한 나머지 속성값에서 top, bottom, left, right로 위치 조절이 가능

 

 

 

visibility 

특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성

 

 

z-index 

한 요소 위에 다른 요소 쌓기 위해 순서를 지정 

값이 작을수록 아래에 쌓이고 값이 클수록 위에 쌓임

명시하지 않을 경우 제일 먼저 삽입된 요소가 1을 가지며, 그 후 추가되는 요소들은 값이 점점 커지게 됨

 

---

[HTML5]

시맨틱 태그(semantic tag)

태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그

HTML5의 시맨틱 태그로 작성한 소스만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있음

“어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편이 있어서는 안된다"

고 하는 웹 접근성 시각에서 볼 때에도 필 요한 부분

<header>

특정 부분의 머리말 

주로 페이지 맨 위쪽이나 왼쪽에 삽입, 검색창을 넣거나 태그를 사용해 사이트 메뉴를 구성 

본문 중 해당 부분의 머리말로도 사용 가능 

 

 

 

<nav>

사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음

사용하는 위치의 영향을 받지 않고 <header>, <footer> 또는 <aside> 또는 어디에나 포함 가능

 

 

<section>
콘텐츠를 주제별로 묶을 때 사용하고, <section>안에 또 다른 <section>태그를 넣을 수 있음

 

 

<article>
article의 사전적 의미가 신문이나 잡지의 기사를 뜻하는 것처럼 웹 상의 실제 내용을 넣음
블로그의 포스트나 웹 사이트의 내용, 독립적인 웹 콘텐츠 항목
완전한 하나의 콘텐츠가 될 때 <article> 태그를 쓰면 됨
<section> 태그는 문맥 흐름 중 콘텐츠를 주제별로 묶을 때 사용 <article> 태그 안에 <section> 사용 가능

 

 

 

<aside>
필수 요소가 아니기 때문에 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용
본문 내용 외에 주변에 표시되는 기타 내용들을 나타낼 때 사용

 

 

 <iframe>
웹 문서 안에 외부 문서를 삽입하기 위해 사용

 

<footer>
웹 문서 제일 하단에 위치하는 태그
<header>, <section>, <article> 등을 모두 사용하면서 푸터 안에 다양한 정보를 넣을 수 있음

 

 

<address>
주로 <footer>태그 안에 사용되며, 웹 페이지 제작자 정보를 넣는데 사용됨

 

 

---

하위 선택자(desendant selector)

부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것

 

 

자식 선택자(child selector)
부모 요소에 포함된 자식 요소에만 스타일이 적용되는 것

 

 

인접 형제 선택자(adjacent selector) 

문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에 스타일이 적용

 

 

형제 선택자(sibling selector) 

인접 형제 선택자와 달리 모든 형제 요소에 적용

 

속성 선택자

태그 안에서 사용하는 속성들의 값에 따라 스타일 지정

 

 

가상 클래스(pseudo class)

웹 요소에 사용자가 클릭하거나 마우스를 올려놓는 등 특정 동작을 할 때 스타일 적용을 위해 사용

1. :link – 문서 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일 적용
2. :visited – 문서 링크 중에서 한 번 이상 방문한 링크에 대한 스타일 적용
3. :hover – 웹 요소 위로 마우스 커서를 올려놓을 때 스타일 적용
4. :active – 링크나 이미지 등의 웹 요소를 누르고 있을 때 스타일 적용
5. :focus – 웹 요소에 포커스가 맞춰졌을 때 스타일 적용 예) 텍스트 박스 안에 마우스 커서를 놓을 때, 탭 키를 눌러 포커스를 이동했을 때 등

 

사용자 동작 외에도 웹 요소의 상태에 따라 스타일 적용을 위해 사용

1. :enable와 :disabled – 해당 요소가 사용 가능한 상태일 때 :enabled , 해당 요소가 사용 불가능한 상태일 때 :enabled를 사용하여 스타일 적용
2. :checked – 라디오 박스나 체크 박스에서 사용자가 해당 항목을 선택했을 때 스타일 적용

 

---

이름	적용 범위	코드
하위 선택자	부모 요소에 포함된 하위 요소 모두에 적용	section p { }
자식 선택자	부모 요소에 포함된 자식 요소 에만 적용	section > p
인접 형제 선택자	문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에만 적용	h1 + ul
형제 선택자	모든 형제 요소에 적용	h1 ~ ul

 

---