[230302] 스니펫 | HTML 주석 | CSS 선택자 | CSS 상속 | 텍스트 태그 | 텍스트 꾸미기

윤지수·2023년 3월 2일

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기

3/51

HTML/CSS 첫 수업 시작!
HTML과 CSS는 개인적으로 좋아하기도 하고 어느 정도 알고 있어서 복습하는 느낌으로 들었다
새롭게 알게 된 내용도 있고 살짝 가물가물한 내용도 있어서 그런 내용 위주로 정리해보려고 한다ㅎㅎ

📌 스니펫

재사용 가능한 소스 코드 조각, 코드 일부분만을 발췌한 것

snippet-generator로 스니펫을 만들어봤다

💡 html.json의 중괄호 안에 복사한 스니펫을 붙여넣어야 한다!
$번호로 커서 위치 순서도 지정할 수 있다

📝 HTML 주석

개발할 때 주석은 최소한으로 남기는 것이 좋다!

그러나 주석을 사용해서 이렇게 구분 지어 놓으면 나중에 컴포넌트 분할할 때 좋다👍🏻

<!-- start -->
<!-- //end -->

<!-- header -->
<header>
	...생략...
</header>
<!-- //header -->

<!-- footer-->
<footer>
	...생략...
</footer>
<!-- //footer -->

그리고 협업할 때도 주석을 사용해서 소통할 수 있다

<!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">
	...생략...
</nav>

<!-- #2022.02.20 4:00 업데이트 -->

🎨 CSS 선택자

전체 선택자(*)

타입/유형/태그/요소 선택자

아이디 선택자(#)

클래스 선택자(.)

특성/속성 선택자([])

주어진 특성을 가진 모든 요소를 선택한다

/*input 요소의 type이 button인 것*/
[type="button"]{
	border:0;
	cursor:pointer;
}

/*클래스가 btn으로 시작하는 것*/
[class^="btn"]{
	color:#fff;
	background: royalblue;
}

그룹 선택자(,)

복합 선택자

자손 선택자( )

자식, 자손 모두 선택자로 지정 가능하다

자식 선택자(>)

자식만 선택자로 지정 가능하다

일반 형제 선택자(~)

인접 형제 선택자(+)

형제 선택자는 기호 뒤에 있는 요소(들)을 선택자로 지정한다

<section>
	<h1>복합 선택자</h1>
	<p>1번 p태그</p>
	<p>2번 p태그</p>
  	<p>3번 p태그</p>
	<div>
    	<p>4번 p태그</p>
    	<p>5번 p태그</p>
      <p>6번 p태그</p>
	</div>
</section>

section, div{
  border:2px solid #ddd;
  padding:10px;
}
section p{
  font-weight:bold;
}

section > p{
  color:royalblue;
}

h1 ~ p{
  text-decoration:underline;
}
h1 + p{
  background:yellow;
}

복합 선택자

🎨 CSS 상속

CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다
color 속성은 자식에게 상속된다
width, height, margin, padding, border 와 같은 것은 상속되지 않는다

inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 한다
-> 속성값 수정할 때 편리!
initial: 브라우저 기본 스타일 속성을 따르게 한다

그리고 button , input 요소처럼 form 관련 태그들은 상속받지 않기도 한다
∵ 브라우저별로 적용된 스타일이 있다

📝 텍스트와 관련된 태그들

h1, h2, h3, h4, h5, h6

a

href : hypertext reference
- tel: 전화번호
- mailto: 이메일주소
target 속성값
- _self
- _blank
download: 링크 이동 대신 URL 저장

href 속성과 id를 사용하여 페이지 내에서 이동하는 해시 링크를 만들 수 있다

<nav>
  <a href="#one">move #1</a>
  <a href="#two">move #2</a>
  <a href="#three">move #3</a>
</nav>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

body{
  margin:0;
  padding:0;
}
nav{
  position:fixed;
  width:100%;
  background:rgba(255,255,255,0.5)
}
div{
  height:600px;
  font-size:80px;
  color:#fff;
  font-wieght:bold;
  display:flex;
  align-items:center;
  justify-content:center;
}
#one{
    background:salmon;
}
#two{
    background:skyblue;
}
#three{
    background:slateblue;
}

p

br

💡 여백을 위해 내용이 없는 p태그를 사용하거나, br태그를 여러 번 사용하지 않기
여백은 CSS를 사용하여 적용!

wbr

현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낸다
한글의 경우는 word-break: keep-all; 속성과 함께 사용해야 한다

word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 어떻게 줄을 바꿀지 지정한다
keep-all: 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않는다
비 CJK 텍스트에서는 normal과 같다
반대는 break-all

code

짧은 코드 조각(한 줄)을 나타날 때 사용한다

pre

HTML에 작성한 내용 그대로를 표현한다
텍스트는 고정 폭 글꼴을 사용하고, 공백이나 줄 바꿈을 그대로 유지한다
공백이 필요한 코드 혹은 텍스트를 사용해 그림을 그릴 때 사용한다

strong/b

em/i

q/blockquote/cite

<p>When Dave asks HAL to open the pod bay door, HAL answers: 
	<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">
		I'm sorry, Dave. I'm afraid I can't do that.
	</q>
</p>

<figure>
	<blockquote>
		<p>
		"만약 네가 오후 네시에 온다면 난 세시부터 행복해질 거야. 
			그리고 널 만날 시간이 가까워질수록 점점 더 행복해지겠지. 
			네시가 되면, 흥분해서 안절부절 못할 거야. 
			그래서 행복이 얼마나 값진 것인지를 알게 될 거야."
		</p>
	</blockquote>
	<cite>— 어린왕자 여우의 말 중</cite>
</figure>

address

연락처 정보: 물리적 주소, URL, 이메일 주소, 전화번호, SNS 정보, 좌표 등

💡 학원, 병원, 식당처럼 직접적인 연락처라 필수인 곳이라면 이 태그를 꼭 사용하는 것이 좋다

mark

형광펜으로 칠한 것처럼 표시된다

abbr

약어(abbreviation)임을 나타낸다

<p>
  <abbr>CSS</abbr> (Cascading Style Sheets)
  <abbr>HTML</abbr> (HyperText Markup Language)
</p>

<!--펼친형태 제공-->
<p>
  <abbr title="Cascading Style Sheets">CSS</abbr>
  <abbr title="HyperText Markup Language">HTML</abbr>
</p>

dfn

현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다

💡 본문 컨텐츠(a링크) - 정의 용어(dfn) id로 연결하여 각주 형태로 정리해두면 좋다

sup/sub

위 첨자 요소/아래 첨자 요소 표기

kbd

키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다

<p>맥 브라우저 강력 새로고침 <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></p>

🎨 텍스트 꾸미기

color

currentColor: 부모에 color 값이 있다면 상속으로 처리된다

<div>
    <p>안녕하세요</p>
</div>

div { color: sandybrown;}
p {
	border: 1px solid currentColor;
}

폰트의 색상과 배경의 명도 대비도 중요하다 for 저시력 시각 장애
최소한 4.5:1

font-family

link나 @import로 삽입하여 폰트를 적용할 수 있다

💡 @import는 문서 최상단에 있어야 한다!

브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 @font-face 속성을 통해 폰트를 설치하여 사용하도록 할 수 있다

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body{
	font-family: "Pretendard-Regular", sans-serif;
}

font-size

px: 고정된 값. 절대 단위
em: 부모 요소의 글자 크기를 기준으로 하는 배수 단위
rem: root em. 최상위 요소(<html>)의 글자 크기를 기준으로 하는 배수 단위

💡 <html> 기본 폰트 사이즈: 16px
💡 em, rem 단위는 반응형 웹페이지 개발, 유지보수 등에 용이
💡 html {font-size: 10px;} & rem 사용 권장

font-weight

normal
bold
lighter: 부모 요소 굵기 보다 한 단계 가볍게
bolder: 부모 요소 굵기 보다 한 단계 두껍게

text-transform

none: 변형방지
uppercase
lowercase
capitalize: 모든 단어의 첫글자를 대문자로

test-decoration(단축 속성)

text-decoration-color

text-decoration-line

underline
overline: 오버라인
line-through: 취소선

text-decoration-style

text-decoration-thickness

윤지수

이전 포스트

[230228] URL, IP, PORT | emmet 문법 | VS Code 단축키 | Git/GitHub

다음 포스트

[230302] 스니펫 | HTML 주석 | CSS 선택자 | CSS 상속 | 텍스트 태그 | 텍스트 꾸미기

멋쟁이사자처럼 프론트엔드스쿨💻

📌 스니펫

📝 HTML 주석

🎨 CSS 선택자

전체 선택자(*)

타입/유형/태그/요소 선택자

아이디 선택자(#)

클래스 선택자(.)

특성/속성 선택자([])

그룹 선택자(,)

복합 선택자

자손 선택자( )

자식 선택자(>)

일반 형제 선택자(~)

인접 형제 선택자(+)

🎨 CSS 상속

📝 텍스트와 관련된 태그들

h1, h2, h3, h4, h5, h6

a

p

br

wbr

code

pre

strong/b

em/i

q/blockquote/cite

address

mark

abbr

dfn

sup/sub

kbd

🎨 텍스트 꾸미기

color

font-family

font-size

font-weight

text-transform

test-decoration(단축 속성)

text-decoration-color

text-decoration-line

text-decoration-style

text-decoration-thickness

[230228] URL, IP, PORT | emmet 문법 | VS Code 단축키 | Git/GitHub

[230303] 텍스트 꾸미기 | 목록 태그 | 가상 클래스 선택자 | 가상 요소 선택자 | CSS 선택자 우선순위 | 블록 레벨 요소 vs 인라인 레벨 요소 | CSS Box Model

0개의 댓글