본문 바로가기
  • GDG on campus Ewha Tech Blog
3-2기 스터디/HTML+CSS+JS 실전 퍼블리싱

[1주차] Basic HTML & CSS Overview

by Hangii 2022. 5. 5.

💡HTML5 핵심 태그 사용법(문단, 텍스트 서식)

  • 제목 표시하기: h1~h6
  • 문단, 줄 바꿈: p, br
  • 글자 굵게 표시하기: b, strong
  • 글자 기울림 표시하기: em, i
  • 글자 밑줄 표시하기: u
  • 글자 취소선 표시하기: s, del
  • 큰 글자, 작은 글자 표시하기: big, small
  • 위 첨자, 아래 첨자: sup, sub
  • 형광펜 배경색 글자: mark
  • 수평선 넣기: hr
  • html은 대소문자 구분을 하지 않는다.

 

💡목록 만들기

  • 순서가 있는 목록: ol(ordered list) > li
  • 순서가 없는 목록: ul(unordered list) > li
  • 중첩된 목록을 만드는 경우에는 부모 리스트의 마감 태그 안쪽에 중첩된 자식 리스트를 작성해야 한다.
    <ol>
        <li>방콕 쇼핑 리스트</li>
        <li>방콕에서 반드시 들러야 할 베스트
            <ul>
                <li>씨암(Siam)</li>
                <li>카오산 로드(Khaosan Road)</li>
            </ul>
        </li>
        <li>방콕 맛집 리스트</li>
        <li>방콕 관광 리스트</li>
    </ol>

 

💡링크, 이미지

  • 외부 링크나 파일 링크하기: a(anchor tag)
  • 이미지 첨부하기: img
  • 링크를 클릭하면 현재 페이지에서 바로 링크 걸린 페이지로 넘어가게 하기
<a href="http://www.naver.com">Naver</a>

 

  • 링크를 클릭하면 새 페이지에서 링크 걸린 페이지 열기 (target="_blank")
<a href="http://www.naver.com" target="_blank">Naver</a>
  •   링크에 마우스를 올리면 글씨가 나타나게 하기
<a href="http://www.naver.com" title="네이버 사이트로 이동">Naver</a>
  • 이미지 첨부하기: img
<img src="http://placecorgi.com" alt="an adorable puppy">

 

 +) img는 마감 태그가 없다!

  • 이미지를 a 태그로 감싸기
<a href="http://www.naver.com"><img src="http://placecorgi.com" alt="an adorable puppy"></a>

 

💡CSS 기본 문법

  • selector
  • property 혹은 attribute
  • value
  • CSS작성 팁: html의 계층 구조에 따라 css를 순서대로 작성한다.

 

💡CSS선택자

<선택자 종류>

📌태그 선택자

p{
	text-align: center;
	color: red;
}

📌클래스 선택자(.)

.center{
	text-align: center;
	color: red;
}

📌아이디 선택자(#)

#center{
	text-align: center;
	color: red;
}

📌태그와 함께 쓰는 선택자

p.center{
	text-align: center;
	color: red;
}

▶️p태그 선택자와 .center 클래스 선택자를 함께 쓴 것이다.
p태그 중 center 클래스를 가지는 것에만 스타일이 적용된다.

📌그룹 선택자
두 개의 선택자의 css코드가 완벽히 일치하면 다음과 같이 표현할 수 있다:

h1, p{
	text-align: center;
	color: red;
}

📌하위 선택자
p 태그 안에 들어있는 태그에 스타일을 적용하고 싶을 때 사용한다.
(이 경우 p태그의 하위 요소인 span 태그에 적용하고 싶을 때)

p span{
	text-align: center;
	color: red;
}

📌전체 선택자(global selector)
html의 모든 요소를 선택할 때 사용한다. (대부분의 경우 사용하지 않음)

*{
	Font-size: 14px;
	Line-height: 24px;
}

📌css주석
원하는 부분을 선택한 후 ctrl + / 누르면 주석이 생성된다. 다시 누르면 주석이 해제된다.
Indent를 유지하면서 주석을 달고 싶은 경우 ctrl+shift+ / 누른다.

/*This is a single-line comment*/

📌html 주석

<!--주석내용-->

 

💡CSS적용 우선순위

  1. !important Style-css 속성 끝에 작성
  2. Inline style –html에 작성
  3. ID selector style
  4. class selector style
  5. tag selector stylecss 코드 작성 순서에 관계없이 위의 위계를 따라 스타일이 적용된다.

▶️내용이 요소의 크기를 벗어났을 때 감추기

overflow: hidden;

▶️스크롤할 때 배경 이미지 부착 여부를 지정: 움직이지 않고 고정

background-attachment: fixed;

 

💡CSS 기본 서식 스타일

  • font-size: 텍스트의 크기 지정
    -value: px em pt % rem
    -rem은 반응형 웹 만들 때 사용한다.
  • font-weight: 글꼴 두께
    -100-900 bold bolder lighter normal(400=normal, 700=bold)
    -기본적으로 굵은 글씨체를 원래대로 얇게 만들려면 font-weight: normal; 
    font-weight: normal;
  • line-height: 줄 간격을 지정하는 특성
  • font-family: 글꼴을 지정하는 속성
  • font-style: 문자 스타일(ex. 기울림체)
  • color: 글꼴 색을 지정하는 속성
  • text-decoration: 텍스트 줄 표시/제거
  • text-transform: 텍스트를 대문자 및 소문자로 변환
  • text-align: 문자 정렬 방법을 지정하는 속성
  • text-shadow: 텍스트 그림자 효과
  • list style: list의 bullet point를 프로그래머가 원하는 아이콘으로 넣을 수 있다.

 

💡HTML 부모요소 vs 자식요소, CSS 자손선택자 vs 자식선택자

  • 자식은 바로 밑의 요소인 것이다. 그보다 하위 요소는 '자식'이 아닌 '자손'이다.
  • 자손선택자는 스페이스 사용, 자식선택자는 >(child selector)사용
  • 자손선택자는 해당 하위 요소 전체를 가리킨다.
  • 바로 아래 계층의 자식만을 선택하고 싶다면 >를 선택해야 한다.
    ▶️ html 
    <div class=”box”>
	<div>
		<div></div>
	</div>
</div>
    ▶️css
.box{
	Border: 1px solid red;
	Width: 400px;
	Height: 400px;
}
.box > div{
	Border: 1px solid blue;
	Width: 200px;
	Height: 200px;
	Padding: 20px;
}
.box > div div{
	Width: 50px;
	Height: 50px;
	Background-color: #000;
}

 

💡CSS 박스모델

📌Box model

  • border-style: 테두리 스타일 지정
  • border-width: 테두리 두께 지정(주로 px로 넣음)
  • border-color: 테두리 색상 지정
  • border-radius: 엘리먼트 코너 둥글게 하기

📌Margin, padding 속성의 크기 지정

  1. 크기 값을 사용하는 경우: 양쪽에 동일한 크기 값이 적용
  2. 두 개의 크기 값을 사용하는 경우: 위쪽 및 아래쪽, 왼쪽 및 오른쪽
  3. 크기 값 4개: 상, 우, 하, 좌 순서(top, right, left, bottom)
  • padding, border를 적용함에 따라 너비가 늘어나는 것을 방지하고 싶은 경우:
box-sizing: border-box;

📌그림자 효과

  • 속성: box-shadow: inset [offset-x offset-y blur color]
  • 속성: text-shadow: [offset-x offset-y blur-radius color]

 

💡HTML의 인라인요소, 블록요소, 인라인블록 (중요!!)

📌인라인 요소: 텍스트 서식을 만드는 대부분의 요소

  • 한 줄에 여러개 배치
  • 기본 너비값은 컨텐츠의 너비값
  • 크기값을 가질 수 없음
  • 상하 마진은 가질 수 없음
  • span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio

▶️크기값을 가질 수 없어서 width와 height값을 임의로 설정해도 작동하지 않는다.

📌블록 요소: 레이아웃을 잡는 요소

  • 한 줄에 한개만 배치
  • 기본 너비값은 100%
  • 크기값을 가질 수 있음
  • 상하좌우 마진을 가질 수 있음
  • div, table, figure, figcaption, header, nav, footer, section, article, aside, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6

▶️기본 너비값이 100%이므로 width: 100%는 따로 넣어줄 필요가 없다.
▶️한 줄에 하나만 배치 가능!!! 두 개가 한 줄에 배치될 수 없다.

📌인라인 블록 요소: 인라인요소와 블록요소의 특징을 둘 다 가짐.

  • 한 줄에 여러개 배치
  • 기본 너비값은 컨텐츠의 너비값
  • 크기값을 가질 수 있음
  • 상하 마진은 가질 수 있음
  • img, input태그들, button, fontawesome

📌태생과 다른 요소로 변환: display 속성 사용

  • display 속성에 주로 사용하는 값: block, inline-block, inline, none, flex
  • inline인 a tag를 block 속성으로 강제로 바꿀 수 있음: 
    a{
	color: red;
	text-decoration: none;
	border: 1px solid red;
	display: block;
	width: 300px;
	margin:5px;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
}
    ▶️a tag를 block요소로 바뀌었기 때문에 이제부터는 width와 margin을 얼마든지 넣을 수 있다.
    ▶️버튼을 만들었는데 세 개를 나란히 배치하고 싶다면? : 여기서 display를 inline-block;으로 바꾼다.

 

💡CSS로 가로 배치하기(float)

📌float 속성

  • float속성은 inline/block/inline-block에 모두 적용된다.
  • margin-auto는 block요소에만 적용된다. (inline 및 inline-block에는 적용되지 않음)
  • css 레이아웃을 하는 경우 부모요소에는 높이값을 주지 않는다. 자식요소에만 주고 자식이 늘어나면 자연스럽게 부모도 늘어난다.
  • Float: none; 이더라도 왼쪽으로 배치되었지만 float:left;는 아니다.
  • html요소는 기본적으로 위치를 조정하지 않으면 왼쪽에 붙는다.
  • 자식요소에 float값을 주면 부모요소가 늘어나지 않는 이유: 자식요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단해 높이값을 잃는다. 높이값을 찾아주려면
    1)부모의 height값을 자식 크기에 맞게 주거나
    2)overflow: hidden; 을 사용한다.
    전자는 자식요소 크기가 바뀔떄마다 바꿔줘야 한다는 단점이 있다.
  • span에도 float-left; 등이 적용된다.
 

💡마우스 오버 효과
(마우스 오버 이펙트(hover) & 트랜지션(transition))

📌마우스 오버 이펙트

 a{
 color: #000;
 transition: 0.5s;
 }
 
 a:hover{
 color: dodgerblue;
 text-decoration: underline;
 }
  • hover이펙트를 주고 싶다면 tag 이름 뒤에 :hover를 적는다.
  • transition: n초동안 애니메이션 효과를 주라는 뜻이다.(주로 0.5s를 사용)
    -transition속성은 :hover가 아닌 곳에 넣어야 마우스를 올리고 뺄 때 모두 적용된다.
  • a tag는 body tag의 color를 따르지 않으므로 따로 지정해주어야한다.
  • text-decoration: none; 해서 밑줄 없앨 수 있음
  • jQuery 사용시 주의사항: ""안이 비어있으면 제이쿼리가 작동하지 않는다. 안에 쓸 내용이 정해지지 않았다면 #none을 적어두자.
📌hover 사용 버튼 생성 예시

▶️html

<a href = "http://www.naver.com">네이버</a>

▶️css

a{ 
	color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    width: 120px;
    display: inline-block;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    transition: 0.5s;
 }
  a:hover{
  	background-color: #000;
    color: #fff;
 }

 

💡순서를 만드는 가상클래스

📌목적: class name을 일일이 사용하지 않고 원하는 요소를 선택하고 싶을 때 사용한다.(간결한html, 짧은css를 위해)
e.g.) nth-child, nth-of-type

▶️html

<div classs = “box”>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

▶️css

.box{
	border: 5px solid #000;
    text-align: center;
}

.box div{
	border: 5px solid #000;
    margin: 10px;
    width: 200px;
    height: 200px;
    display: inline-block;
}
.box div:nth-child(2){
	color: red;
}
  • text-align: center;을 부모요소에 넣어줘야 가운데로 간다. 또, 이 경우 margin auto는 절대 적용되지 않는다.
  • nth child는 tag의 종류를 가리지 않아서 여러 개의 div들 위에 갑자기 h2 태그를 추가하면 요소가 하나씩 밀린다. 따라서 이럴땐 .box div:nth-of-type()사용한다. 그러면 css가 해당 요소의 type을 확인한다.
저작자표시 비영리

'3-2기 스터디 > HTML+CSS+JS 실전 퍼블리싱' 카테고리의 다른 글

[6주차] before, after, 순서체크 가상클래스, 체크박스  (0) 2022.05.22
[5주차] 확장선택자, 콘텐츠 slider  (0) 2022.05.22
[4주차] before after 가상클래스와 순서 체크 가상클래스  (0) 2022.05.21
[3주차] CSS 키프레임 애니메이션과 가상클래스 hover  (0) 2022.05.08
[2주차] jQuery Basics & Method  (0) 2022.05.05

관련글

댓글

티스토리툴바