🌟] HTML/CSS 시작하기
by J4BEZ시작에 앞서 해당 게시물은 코드 잇(code it)의 강좌를 통해 학습한 내용을 복습한
복습 게시물임을 밝힙니다.
+ HTML과 CSS
- HTML(Hyper Text Markup Language):
웹 사이트에 들어갈 내용을 담아주는 '마크업 언어'
건물의 철골과 같은 뼈대를 담당하는 친구.
주석의 시작은 <!--
마무리는 --> 로 작성하여 표현
<!-- 주석은 다음과 같이 표현 -->
CSS(Cascading Style Sheets):
HTML로 작성된 내용들을 꾸며주는 친구.
인테리어를 담당하는 친구.
주석의 시작은 /*
마무리는 */ 로 작성하여 표현
/* 주석은 다음과 같이 표현 */
+ 0. 기본 HTML 태그 정리
- <!DOCTYPE> 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 사용해야 함.
HTML의 버전을 나타내 주는 친구로 최신 버전인 HTML 5를 사용하기 위해선 아래와 같이만 기입해도 가능
<!DOCTYPE html>
- <title> 태그
페이지의 제목을 나타내 줌
<title>Php 4:13</title>
- <h1> ~ <h6> 태그
'heading'의 약자로 머리말을 위한 태그
See the Pen abvoGzE by J4BEZ (@j4bez) on CodePen.
- <p> 태그
문단을 나눠주는 태그
See the Pen KKdPRBq by J4BEZ (@j4bez) on CodePen.
- 굵게: <b> vs <strong>
둘 다 외관상 글자를 굵게[Bold] 바꾸어주는 것은 동일함.
그러나 외관적 요소만 바꿔주는 <b>와 달리 <strong>은 경각심이 필요하거나 긴급한 콘텐츠일 경우 활용
: 높은 중요도 요소
HTML strong 요소는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
developer.mozilla.org
See the Pen KKdPeaR by J4BEZ (@j4bez) on CodePen.
- 기울기: <i> vs <em>
둘 다 외관상 기울게[Italic] 바꾸어주는 것은 동일함
그러나 외관적 요소만 바꿔주는 <i>와 달리 <em>은 강조[EMphasized]를 위해 사용
: 강세 요소
HTML em 요소는 텍스트의 강세를 나타냅니다. em 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.
developer.mozilla.org
See the Pen ZEbzoQK by J4BEZ (@j4bez) on CodePen.
<strong> 태그와 <em> 태그는 눈이 불편하신 분들이나 노인 분들과 같은 분들을 위해 준비된 스크린 리더(컴퓨터 낭독 소프트웨어)에서 조금 더 강조해서 읽어줌.
- 인코딩 방식
일부 브라우저에서 한글이 깨지는 것을 방지하기 위해 사용
<meta charset="utf-8">
- Optional tag: <html>, <head>, <body>
주로 코드의 정리를 위한 목적으로 사용되는 Optional code
사용법은 아래와 같음.
<html>
<head>
<!-- meta 태그나 title 태그는 주로 이곳으로-->
<meta charset="utf-8">
<title>isaiah 41: 10 KJV</title>
</head>
<body>
<!-- 본문의 내용은 주로 이곳으로-->
<p>Fear thou not; for I am with thee:
be not dismayed; for I am thy God:</p>
<p>I will strengthen thee; yea, I will help thee; yea,
I will uphold thee with the right hand of my righteousness.</p>
</body>
</html>그러나 이 방식을 사용하는 것에 대한 찬반 의견이 분분하며 구글 HTML/CSS 스타일 가이드에선 위 방식을
권장하지 않는다고 나와있음. 개발 시작 시 본인 혹은 팀원과 상의를 통해 사용할 것인지 사용하지 않을 것인지 선택 후 진행
- <a>태그: 하이퍼 링크(Anchor)
href 속성을 통해 Link를 지정가능
target 속성을 target = "blank" 으로 설정해주어 연결된 링크가 새 창에서 열리게 할 수 있음
<a href ="원하는 링크"> 하이퍼 링크가 입혀지기 원하는 글 </a>
<a href ="https://google.com" target = "blank">구글로 가는 링크</a>다음과 같이 사용
- <img>태그: 이미지
<meta>태그와 같이 닫힘 태그</~~>가 없는 친구
src 속성을 통해 경로를 지정 가능
width와 hegith 속성을 통해 너비와 높이 설정 가능
-> 그냥 숫자 (픽셀로 적용됨), px[픽셀] (화면의 해상도에 비례) , % 단위로 지정가능 (%는 브라우저의 크기의 비례)
width와 height를 따로 설정하지 않을 시엔 사진 본래의 크기
<img src ="사진의 경로(주소)" width = "크기" height = "크기">See the Pen LYpPJGB by J4BEZ (@j4bez) on CodePen.
- 묶어서 보관: <div> 태그 vs <span> 태그
안의 내용물들을 묶어서 보관해줄 수 있는 요소
css 스타일을 묶음으로 적용해줄 수 있는 장점외에도 여러 편의성이 있음 [이후 보게될 class와 id를 통해서 확인 가능]
<div> 태그는 block 속성 -> 해당 요소들이 블럭으로 자리를 차지하여 줄이 바뀜
<span> 태그는 inline 속성 -> 딱 알맞은 크기만 차지 하기 때문에 줄이 바뀌지 않음
필요에 맞게 사용 inline vs block
See the Pen rNONxEK by J4BEZ (@j4bez) on CodePen.
+1. CSS 기초
CSS를 통해 HTML의 각 <태그> 마다 스타일(ex. 폰트 크기, 색깔, 정렬 등)을 정해줄 수 있음
문법은 태그{ 속성: 수치; } 형식으로 되어있음
/* ex). css로 p 태그 안의 요소들의 폰트 사이즈를
10px로 설정하는 방법*/
p{
font-size: 10px;
}See the Pen wvKwEjG by J4BEZ (@j4bez) on CodePen.
- CSS 사용법
* 1. HTML 문서 내 <style> </style>태그 삽입
<html>
<head>
<style>
h1{
color:lime;
text-align: center;
}
p{
font-size: 10px;
}
</style>
</head>
<body>
<h1>
곤한 내 영혼 편히 쉴 곳과
</h1>
<p>
풍랑 일어도 안전한 포구
</p>
</body>
</html>
*2. style 속성 활용
<h1 style="color: lime; text-align: center;">
폭풍까지도 다스리시는
</h1>
<p style="font-size: 10px;">
주의 영원한 팔 의지해
</p>
*3. 외부 CSS 파일 + <link> 태그 -> 가장 추천되는 방법
href 속성에 CSS파일의 경로를 기입해주고
rel 속성에 stylesheet 로 적어 링크된 파일이 HTML의 파일의 스타일시트 파일임을 알려줌
<link href =".css파일의 경로" rel="stylesheet">See the Pen GRpKYeM by J4BEZ (@j4bez) on CodePen.
- 특정 요소에게만 CSS 스타일을 입혀주는 방법
*1. <태그 1> 안에 있는 <태그 2>로 감싸진 요소만 변화를 주고 싶을 때 [ 태그 1 태그 2 { } ]
ex). <p> 태그 안에 있는 <i> 태그 에만 변화를 주고 싶을 때
<style>
p i{
color:aqua;
}
</style>
<i>마태복음 26: 41</i>
<p>
시험에 들지 않게 <i>깨어 있어 기도하라</i>
마음에는 원이로되 육신이 약하도다 하시고
</p>
<!-- '깨어 있어 기도하라' 만 aqua 색깔로 변화 -->
*2. <태그 1> 안에 있는 여러 개의 <태그 2>로 감싸진 요소들 중에 'n' 번째 요소만 변화를 주고 싶을 때
ex). <p> 태그 안에 있는 다수의 <b> 태그 중에서 2번째 <b> 태그의 요소에만 변화를 주고 싶을 때
:nth-of-type(숫자) 를 활용하면 가능
<style>
p b:nth-of-type(3){
color:aqua;
}
</style>
<b>시편 51 : 1</b>
<p>
<b>하나님</b>이여 <b>주의 인자</b>를 좇아 나를 긍휼히 여기시며
<b>주의 많은 자비</b>를 좇아 내 죄과를 도말하소서
</p>
<!-- '주의 많은 자비' 의 폰트 컬러만 aqua 색으로 변화 -->
*3. class 속성과 id 속성을 이용
HTML 요소에게 '이름'을 주는 방법은 class와 id 두 가지 방법이 있음.
class : 연관성, 통일성
<style>
.feel{
color: blue;
}
</style>
<p class = "feel">hello?</p>
<p class = "feel">how are you?</p>- css에서 스타일을 지정해줄 때 class의 이름 앞에 '. (마침표)' 를 찍음
- 같은 class 이름을 여러 요소가 함께 사용할 수 있고 함께 적용되어 질 수 있음.
- 한 요소가 여러 class를 가질 수 있음. class 끼리 같은 속성을 변화시켜 줄 때(ex. color 등) 가장 아래에 적힌 class가 우선순위로 적용됨.
id : 독립성(unique)
<style>
#jesus{
color : red;
}
.sin{
color : blue;
}
</style>
<p id = "jesus" class ="sin">
어느 곳에 가든지 요동하지 않음은 주의 팔을 의지 함 이라
</p>- css에서 스타일을 지정해줄 때 id의 이름 앞에 '# (샾)' 을 찍음
- id는 class와 달리 여러 요소끼리 공유가 불가능함. 한 아이디는 한 요소만 사용가능.
- id는 class와 달리 한 요소가 한 id만 가질 수 있음.
- 한 요소는 한 id와 여러 class를 동시에 가질 수 있지만, 서로 같은 속성을 변화시킬 때 id가 우선순위가 더 높게 적용됨.
선택자에 관한 우선 순위는 다음 링크를 통해 더 자세히 공부할 수 있음
CSS-우선순위
우선 순위라 함은 본인은 보통의 코딩이 위에서부터 순차적으로 적용되기에중복속성일경우 당연히 가장 마...
blog.naver.com
반복사용 둘 다 가능한거 같은데 class id 차이를 잘 모르겠어요.. | 코드잇
새로운 코딩 교육의 시작, 월 3만원대로 Python, JavaScript, HTML/CSS, Java 등 1,600개 이상 프로그래밍 강의를 무제한 수강하세요!
www.codeit.kr
+2. 기초 CSS 속성 정리
- 폰트 크기: font-size:
pt(포인트), pt(포인트) 등의 Absolute Lengths (절대 크기) em, %등의 Relative Lengths (상대 크기)로 설정 가능
%는 부모 요소의 크기에 따라 결정 됨.
당신은 모를 수도 있는 CSS의 7가지 단위
우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다. 웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 우리의 특별한 방법을 알면서, 단 한 번도...
webdesign.tutsplus.com
종합 안내: Rem 그리고 Em, 언제 써야 할까
여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다! em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환됩니다....
webdesign.tutsplus.com
PXtoEM.com: PX to EM conversion made simple.
What is an EM? Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px For more information visit Wikipedia and Mozilla MDN. What is the
pxtoem.com
CSS Units
CSS Units CSS Units CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot
www.w3schools.com
See the Pen GRpRora by J4BEZ (@j4bez) on CodePen.
- 여백: margin
요소 사이의 여백을 설정가능.
여백의 방향은 margin-top/bottom/left/right: 로 설정가능.
See the Pen xxwxqJJ by J4BEZ (@j4bez) on CodePen.
- 텍스트 색깔: font-color
1. css에서 정해준 140개의 색깔 이름을 이용
2. rgb(숫자,숫자,숫자) 이용
3. 16진수 색깔코드 (#A1DABF) 를 이용
color: aquamarine;
color: rgb(127, 255, 212);
color: #7FFFD4;
- 폰트 굵기 설정: font-weight
사용 가능한 값은 100, 200, 300, 400, 500, 600, 700, 800, 900 으로 100이 가장 얇은 값이고 900이 가장 두꺼운 값.
해당 값 이외의 다른 숫자를 기입하면 적용되지 않고 그냥 기본 값으로 설정됨.
또한 폰트나 브라우저에 따라서 지원하는 굵기 값(굵기의 정도)가 다른 경우도 있음(ex. 100, 400, 700 만 지원되는 경우)
font-weight: normal; 은 font-weight: 400과 동일하며 font-weight: bold; 는 font-weight: 700; 과 동일함.
font-weight: 400;
font-weight: 700;
font-weight: normal;
font-weight: bold;
- 텍스트 정렬: text-align
텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있음
<p>나 헤더 태그들 <h1 ~ h6> 뿐만 아니라 <div> 태그의 내용물도 정렬 가능
See the Pen zYvYqNe by J4BEZ (@j4bez) on CodePen.
- 이미지 가운데 정렬: margin 속성 활용
/* 예시 */
img{
display: block;
margin-right: auto;
margin-left: auto;
}See the Pen MWaWJdy by J4BEZ (@j4bez) on CodePen.
- 텍스트 데코레이션: text-decoration
밑줄, 윗줄, 취소선, 혹은 기본 값(아무 줄도 적용X) 적용 가능.
하이퍼 링크 생성시 기본적으로 적용되는 밑줄도 제거 가능
text-decoration: underline; /* 밑줄 */
text-decoration: overline; /* 윗줄 */
text-decoration: line-through; /* 취소선 */
text-decoration: none; /* 기본 값 */
- 줄 간격 설정: line-height
줄 사이의 간격을 조정, 극단 적으로 줄이면 겹칠 수 도 있음.
내용 자체가 표시되는 content area(콘텐츠 영역)에는 영향을 주지 않지만
각 줄이 실질적으로 차지 하는 공간을 정해줄 수 있음.
See the Pen oNjNLRE by J4BEZ (@j4bez) on CodePen.
- 폰트 설정: font-family
>설치된 폰트
font는 크게 5종류로 나눌 수 있음
* Serif: 글자의 마무리 부분이 구부러진 폰트들 (ex. Times New Roman, 궁서체)
* Sans-Serif: Serif와 달리 깔끔한 디자인 (ex. Arial, 굴림체)
* Monospace: 모든 글자 폭이 똑같아 코딩용으로 유용 (ex. Courier, Courier New)
* Cursive: 필기체 (ex. Comic Sans MS, Monotype Corsiva)
* Fantasy: 조금 특이한 나머지 글씨체 (ex. Impact, Haettenschweiler)
아래와 같이 사용
font-family: '첫 번째로 찾아볼 글꼴', '다음 대안 글꼴', ... , 폰트 글꼴 종류(Gerneric-Family)(ex. Sans, Monospace 등);
/*만약 폰트 글꼴의 이름에 스페이스바가 없다면 '따옴표'를 생략하고 사용해도 됨
그러나 Times New Roman과 같이 이름 사이에 공간이 있는 경우엔 "따옴표"로 감싸주어야 함
'Times New Roman'
Arial
*/같은 Generic-Family 일지라도, 어떠한 폰트가 적용될진 OS 환경에 따라 우선 순위가 달라짐
▼Serif
Operating systems default serif fonts — FontsArena
See what the default serif font is in different desktop and mobile operating systems like Mac OS, Windows, Linux, iOS, watchOS, Android.
fontsarena.com
▼Sans-Serif
Operating systems default sans-serif fonts — FontsArena
See what the default sans-serif font is in different desktop and mobile operating systems like Mac OS, Windows, Linux, iOS, iPadOS, watchOS, Android.
fontsarena.com
>설치되지 않은 폰트: 웹 폰트 이용
웹 폰트에서 제공하는 링크대로 HTML과 CSS에 적용
* ("쌍따옴표")와 ('따옴표')의 차이? 기능적인 차이는 없음-> 가이드 라인에선 웹 폰트 사용시 ('따옴표')를 권장함
>다운 받은 외부 폰트 사용
CSS에 다음과 같이 기입 한 이후 font-family를 통해 설정
@font-face{
src: url("폰트 파일의 저장 경로.ttf");
font-family: '폰트의 이름 설정'
}
/* 사용 예 */
p{
font-family: '폰트의 이름 설정'
}See the Pen ZEbEBLj by J4BEZ (@j4bez) on CodePen.
---
'코드잇 수업 필기 > 1) 웹 퍼블리싱' 카테고리의 다른 글
| 🌟] HTML/CSS 핵심개념 (0) | 2020.04.25 |
|---|
블로그의 정보
작은 고양이의 캣 타워
J4BEZ