2024.01.11 27일차 수업: HTML, CSS 기초(3)
2024.01.12 28일차 수업: HTML, CSS 기초(4)
2024.01.15 29일차 수업: HTML, CSS 기초(5)

Floating

현재 위치에서 빼서 올려준다

li:nth child

Block 태그 VS Inline 태그

❌ 이렇게 쓰면 안돼요!!!

< span >
	< div > < /div >
< /span >

block 태그 안에서는 block태그, inline 태그 하위 태그로 가능
inline 태그 안에서는 inline 태그만 가능!! block 태그 불가능
(예외. < a > 앵커태그)

address 태그

홈페이지 소유자, 관리자 정보 작성 시 사용
기본이 italic 체
contact info(email, URL, phone #, etc)

경로 지정 시!!

'>' : 부모 자식 (div>h1)
한칸 공백 상위요소 하위요소 (div h1)
#header>.inner>.logo{} == #header .logo{}

Float

Flex

Position

position: static / fixed / relative / absolute / sticky

• fixed
  브라우저 기준으로 left right top bottom의 좌표가 지정됨
• relative
  현재 위치를 기준해서 left right top bottom의 좌표가 지정됨
• absolute
  position값을 가지고 있는 상위요소를 기준해서 left right top bottom의 좌표가 지정됨

left right top bottom 속성은 포지션 값이 적용 안됨.

postion 주의!

position: fixed, absolute -> margin:auto 적용 불가!!!!

가운데 정렬
1. left: 0; right: 0; margin: auto 적용됨
2. left: 50%; transform: translate(-50%, -50%);

z-index

• position값을 가지고 있는 요소에만 적용됨
• 값은 정수, 음수가능(순서이기 때문에 단위는 없음)
• 숫자가 큰 것 = 상위 layer

border

• border-radius
  둥근모서리
  상단 왼쪽 기준으로 시계방향
• box-shadow
  그림자 속성
  x-offset / y-offset / blur / color
  inset(inner shadow) / outset(기본)
• text-shadow
  문자그림자 속성

box-sizing

• content-box
  width값에 border, padding 미포함
• border-box
  width값에 border, padding 포함

가상 셀렉터Pseudo Selector

:hover(마우스 올렸을 때)
:focus(커서 들어갔을 때)
:active(클릭했을 때)

input (inline 태그)

type = "text"
type = "submit" (입력버튼)
type = "reset" (취소버튼)
type = "button" (입력/취소의 값이 없는 버튼)
< button >< / button > 버튼 태그를 써도 됨

---

Naming Guide

다양하고 많은 사람들이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중 하나가 바로 사전에 약속한 규칙에 따라 이름을 정하는 것이다. 본 가이드는 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 크게 두 부분으로 나뉜다. "Naming 규칙"은 CSS, HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리하며, "Prefix/Subfix/Suffix 규칙"에서는 다양한 개발환경에 대비한 예약단축어들을 소개하고 이를 조합하는 방식에 대해 설명한다.

1. Naming 규칙

◾️ 공통 규칙

• naming의 첫 시작에 숫자, 특수문자, 대문자의 사용을 지양한다.
• naming은 '형태의미상태' 순으로 조합하며 3단계를 넘어가지 않도록 권장한다.
  e.g.) btn_apply_on, box_news, box_reply_open 등
• naming 정의 시 prefix, subfix, suffix를 최대한 활용한다.

◾️ id / class 규칙

• id는 camelcase 방식으로, class는 underscore 방식으로 사용한다
  e.g.) id="boardView" class="link_view"
• id는 화면에서의 고유 기능을 명시하도록 naming한다.
  e.g.) id="btnSearch" (X)
           id="btnGnbSearch" (O)
• class는 요소 기능을 표현하도록 naming한다.
• id는 문서 내 한번만 사용되며, id와 class는 가급적 같지 않게 naming한다.

◾️ folder / file 규칙

→ HTML

대, 중 프로젝트인 경우

• 서비스의 대분류에 따라 폴더를 생성하고 대분류의 폴더 안에 HTML 파일을 생성한다.
• 생성되는 HTML의 파일명은 '의미_상태' 순서로 naming한다.(상태는 필요에 따라 사용)
  e.g.) /대분류명/notice.html,
           /대분류명/notice_view.html

소 프로젝트인 경우

• 따로 폴더를 생성하지 않고 HTML파일들을 한 곳에 생성한다.
• 생성되는 HTML의 파일명은 'serviceName _의미_상태' 순서로 naming한다.
  e.g.) /serviceName_intro.html,
           /serviceName_intro_write.html

→ CSS

대, 중 프로젝트인 경우

• 공통요소 모음인 common.css가 서비스별로 생성되며, 서비스의 대분류에 따라 '서비스명 _대분류명'으로 CSS의 name을 만들어 사용한다.
  e.g.) common.css, serviceName_intro.css
• 각 서비스 페이지에 import되는 css는 common.css, serviceName_대분류명.css가 되며 2개 이하로 import 되도록 한다.

소 프로젝트인 경우

• 공통요소모음인 common.css 하나만 생성하여 사용한다.

프로모션 프로젝트인 경우

• 페이지 내 head 사이에 internal 방식으로 style을 추가한다.

→ images

대, 중 프로젝트인 경우

• images 폴더를 생성하고 common 폴더 및 대분류별 폴더를 생성하여 그 하위에 관련 image들을 저장한다.
  e.g.) images/common/btn_comm.gif
           images/대분류명/intro_music.gif

소 프로젝트인 경우

• images 폴더에 모두 생성하며, 임시 image 사용 시 temp 폴더만 생성한다.
  사용되는 image 중 운영성 image 또는 임시 image는 temp 폴더를 생성하여 그 안에 위치시킨다. image 서버에 올라간 image를 수정 시 덮어쓰기는 하지 않고, 다른 이름으로 image 파일을 만드는데, 수정된 image는 '기존naming _수정날짜'로 naming하며, 같은 날짜에 한 image 파일을 두 번 이상 수정하게 되는 경우는 '기존naming_수정날짜_v2'로 naming하여 숫자로 카운팅한다.
  e.g.) btn_apply.png (기존)
           btn_apply_240118.png (수정)
           btn_apply_240118_v2.png (재수정)

2. Prefix/Subfix/Suffix 정의

◾️ Prefix 접두사

• 접두사를 의미하는 것으로, 앞부분에 사용하며 주로 형태를 나타내는 데 사용된다.
  e.g.) tab_notice, tbl_product
• 기본 prefix는 형태별로 통일한다.
• 서브 prefix가 필요한 부분은 underscore로 구분하여 표기한다.(line / line_dot)
• prefix 리스트에 한해 subfix, suffix에서 축약형 naming을 사용한다.(이 외 naming은 의미전달 가능하도록 기재)
  ◦ prefix 2개 이상 중복 시 기능적인 prefix가 맨 앞부분에 위치할 수 있도록 한다.
  ◦ 단독사용 클래스는 지양하며 prefix를 조합한 형태로 작성한다. (예외: fst, lst, hide, on)
  ◦ on 클래스인 경우, 단일 특정요소에 상태 변화 클래스를 적용한다면 suffix로서 적용한다.

◾️ Subfix 하부 기호(subscript)

• 하부 기호로서 subfix는 prefix와 함께 부가 설명 용도로 사용한다.
  e.g.) ico_arr_news.gif
  

◾️ Suffix 접미사

• 접미사를 의미하는 것으로, prefix와 함께 부가설명 용도로 사용하며 주로 상태를 나타내는 데 사용된다.
  e.g.) btn_confirm_on, btn_prev 등
  

◾️ 대체 텍스트 / 예약어

• 대체 텍스트 제공을 위한 여러 기법별 공용 클래스명 정의
• 예약어는 미리 정의된 이름을 사용하는 것으로 레이아웃 같은 경우에 주로 사용된다.