티스토리에 적었던 내용 벨로그에 옮김
🚩 코딩에 도움되는 사이트 모음
MDN
📝 설명
- 웹 개발 표준 문서
🔗 참고 링크 & 도움이 되는 링크
w3Schools
📝 설명
- 온라인으로 웹 기술을 배우는 교육용 웹 사이트
- HTML, CSS, 자바스크립트, JSON, PHP, 파이썬, XML, SQL, Bootstrap, Node.js, JQuery등 다양한 교육용 자료를 제공
🔗 참고 링크 & 도움이 되는 링크
TCPSchool
📝 설명
- 기초적인 코딩을 배울 수 있는 국내사이트
🔗 참고 링크 & 도움이 되는 링크
HTML Color Codes
📝 설명
- 선택한 색과 어울리는 색을 추천해주는 사이트
🔗 참고 링크 & 도움이 되는 링크
색상 코드 설명
- #FF0000 : FF(R) 00(G) 00(B) -> red
- #FF00FF : FF(R) 00(G) FF(B) -> magenta
D2 Coding
📝 설명
- 개발하기 편리하도록 네이버에서 개발한 폰트
🔗 참고 링크 & 도움이 되는 링크
Lorem Ipsum
📝 설명
- 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용한다.
- 아무 의미 없는 단어들로 이루어져 있음.
- 목업텍스트. 채우기 텍스트.
🔗 참고 링크 & 도움이 되는 링크
한글 Lorem Ipsum
📝 설명
- 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용한다.
- 아무 의미 없는 단어들로 이루어져 있음.
- 목업텍스트. 채우기 텍스트.
🔗 참고 링크 & 도움이 되는 링크
placeholder
📝 설명
- 레이아웃을 만들 때 마땅히 지정한 이미지가 없는 경우 더미 이미지로 활용할 수 있는 사이트.
🔗 참고 링크 & 도움이 되는 링크
🚩 HTML
HTML의 기본적인 구조
📝 사용법
- html을 사용하기 위한 가장 기본적인 구조.
- 대부분의 태그는 여닫는 형식으로 되어 있다.
✒️ 작성법
입력 & 설명
<html>
<head>
</head>
<body>
대부분의 내용은 이 안에 들어갑니다
</body>
</html>위 코드에서 글씨 깨짐을 방지하기 위해 아래와 같이 <head>안에 meta 태그를 추가함.
유니코드를 위한 문자셋인 utf-8을 가장 많이 사용한다.
이 태그가 없으면 한글이나 특수문자 등이 깨져 보일 수 있으므로 꼭 작성해 주는 것이 좋음
heading tag
📝 설명
- 주로 제목을 쓸 때 사용하는 태그.
- 대,중,소제목을 나타낼 때 사용
✒️ 작성법
✍ 입력
아무것도 적용하지 않은 글씨
<h1>제목(heading)을 쓸때 사용하는 태그 -h1</h1>
<h2>heading tag는 글씨를 두껍게 만들어줘요 -h2</h2>
<h3>heading tag는 자동으로 줄바꿈이 됩니다. -h3</h3>
<h4>heading tag는 위 아래 여백이 들어갑니다. -h4</h4>
<h5>h5 tag를 사용했어요 -h5</h5>
<h6>h6 tag를 사용했어요 -h6</h6>
<h7>h7 tag를 사용했어요 -h7은 없음 h1~h6까지</h7>💻 출력
아무것도 적용하지 않은 글씨
제목(heading)을 쓸때 사용하는 태그 -h1
heading tag는 글씨를 두껍게 만들어줘요 -h2
heading tag는 자동으로 줄바꿈이 됩니다. -h3
heading tag는 위 아래 여백이 들어갑니다. -h4
h5 tag를 사용했어요 -h5
h6 tag를 사용했어요 -h6
h7 tag를 사용했어요 -h7은 없음 h1~h6까지<hr>
📝 설명
- 화면 가로 전체에 구분선을 그어준다.
- css로 길이 조절이 가능하다.
✒️ 작성법
✍ 입력
<hr>💻 출력
<br / > or <br>
📝 설명
- 줄바꿈 태그. html 코드에선 enter키가 먹히지 않기 때문에 br태그를 사용하여 줄을 바꿀 수 있다. (여러번 적용 가능)
- HTML5 표준으로는 <br>로 사용되지만 <br />도 사용 가능하다. (React에서는 후자로 사용됨)
✒️ 작성법
✍ 입력
<br />
<br>inline 방식 태그
🚩 글씨 굵기 관련 태그
<b>, <strong>
📝 설명
- <b>와 <strong> 둘 다 글씨를 굵게 해주는 태그지만 속성을 변경하여 다르게 사용 가능하다.
- 효과는 동일하지만 코드를 보면 개발자가 어떤 생각으로 코딩했는지 알 수 있다.
✒️ 작성법
✍ 입력
<b>굵은 글씨</b>를 표현 해주는 태그
<strong>중요한 텍스트를 나타내기</strong>위한 태그💻 출력
굵은 글씨를 표현 해주는 태그
중요한 텍스트를 나타내기위한 태그
🚩 글씨 기울임 관련 태그
<i>, <em>
📝 설명
- <i>와 <em> 둘 다 글씨를 굵게 해주는 태그지만 속성을 변경하여 다르게 사용 가능하다.
- 효과는 동일하지만 코드를 보면 개발자가 어떤 생각으로 코딩했는지 알 수 있다.
✒️ 작성법
✍ 입력
<i>글씨를 기울어지게 이탤릭체</i>로 표현해주는 태그
<em>강조(emphasis)하고 싶은 부분</em>을 표현하기 위해 사용하는 태그💻 출력
글씨를 기울어지게 이탤릭체로 표현해주는 태그
강조(emphasis)하고 싶은 부분을 표현하기 위해 사용하는 태그
🚩 글씨 밑줄 관련 태그
<u>, <ins>
📝 설명
- <i>와 <em> 둘 다 글씨를 굵게 해주는 태그지만 속성을 변경하여 다르게 사용 가능하다.
- 효과는 동일하지만 코드를 보면 개발자가 어떤 생각으로 코딩했는지 알 수 있다.
✒️ 작성법
✍ 입력
<u>글자에 밑줄</u>을 그어주는 태그
<ins>내용을 추가(insert)하는 의미</ins>로 사용하는 태그💻 출력
글자에 밑줄을 그어주는 태그
내용을 추가(insert)하는 의미로 사용하는 태그
🚩 글씨 취소선 관련 태그
<s>, <del>
📝 설명
- <s>와 <del> 둘 다 글씨를 굵게 해주는 태그지만 속성을 변경하여 다르게 사용 가능하다.
- 효과는 동일하지만 코드를 보면 개발자가 어떤 생각으로 코딩했는지 알 수 있다.
✒️ 작성법
✍ 입력
<s>글자의 중앙에 라인을</s> 그어주는 태그
제가 좋아하는 아이스크림은 <del>엄외</del> <ins>민초</ins>입니다. <br><br>💻 출력
글자의 중앙에 라인을 그어주는 태그
제가 좋아하는 아이스크림은 엄외 민초입니다.
🚩 첨자 태그
<sup>, <sub>
📝 설명
-
sup
- 글자의 윗부분에 첨자(superscript) 형태로 작성되는 태그
-
sub
- 글자의 아랫부분에 첨자(subscript) 형태로 작성되는 태그
✒️ 작성법
✍ 입력
3<sup>2</sup> = 9 SAMSUNG<sup>TM</sup> H<sub>2</sub>O💻 출력
32 = 9 SAMSUNGTM H2O
🚩 글씨 크기
<small>, <big>
📝 설명
-
small
- 기본 텍스트 크기보다 작은 글씨를 표시할때 사용
-
big
- 기본 텍스트 크기보다 큰 글씨를 표시할때 사용
✒️ 작성법
✍ 입력
기본 텍스트 크기보다 <small>작은 글씨</small>를 표시할때 사용 -small <br>
기본 텍스트 크기보다 <big>큰 글씨</big>를 표시할때 사용 -big💻 출력
기본 텍스트 크기보다 작은 글씨를 표시할때 사용 -small
기본 텍스트 크기보다 큰 글씨를 표시할때 사용 -big
🚩 텍스트 강조
<mark>
📝 설명
- 텍스트를 강조하거나 하이라이트를 표시하고 싶을때 사용
✒️ 작성법
✍ 입력
텍스트를 <mark>강조하거나, 하이라이트를 표시</mark>하고 싶을때 사용💻 출력
텍스트를 강조하거나, 하이라이트를 표시하고 싶을때 사용
공부하는 벨로그