HTML? CSS?
Hyper Text Markup Language
HTML은 프로그래밍 언어단계는 아니지만, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다. 한마디로 브라우저가 알 수 있도록 구조화하고, 속성 정의를 내려주는 단계라 할 수 있을 것 같다.
Cascading Style Sheets
CSS는 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정해준다.
HTML 작성 형식
HTML 코드 작성 시 형식을 지키며 작성하여야한다.
HTML에는 태그라는 것이 있으며, 태그는 여는 태그와 닫는 태그가 한 쌍을 이룬다.
<!-- 주석 내용을 적을 수 있어요. -->
<!-- !DOCTYPE 태그는 문서 버전을 명시할 수 있습니다. -->
<!-- 아래의 표현은 html5 -->
<!DOCTYPE html>
<!-- 태그 == 요소 -->
<html lang="ko"> <!-- atrribute 설정 (한글) 브라우저가 읽을 때 힌트를 줄 수 있다. -->
<head> <!-- 메타(meta) 정보, 문서 제목 등 포함 -->
<meta charset="UTF=8" />
<title>문서의 제목</title>
</head>
<body>
<h1>My First Heading tag</h1>
<a href="second.html">두번째 페이지로 이동</a>
<a href="third.html">세번째 페이지로 이동</a>
<a href="images.html">춘식이 사진 보러 가기</a>
<p>텍스트 띄어쓰기 여러번</p>
<p>텍스트
엔터 여러번
</p>
</body>
</html>태그에는 attribute를 설정해 줄 수 있고, 위 코드에서 html lang="ko" 해당 부분이 attribute이다.
여는 태그에서 시작해 닫는 태그까지를 요소라고 한다.
HTML에서는 공백과 개행문자는 단 한 번만 인지하며, 여러번 사용을 위해선 기능에 맞는 코드를 넣어주어야 한다.
block요소와 inline요소의 이해
<div>태그는 block요소로 사용 시 가로공간을 가득차게 만들어준다.
블럭요소인 태그는 마찬가지로 모두 가로공간을 가득차게 만들어주며
inline 요소는 해당 요소에만 영향을 미치게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Block 요소</title>
</head>
<body>
<div style="background-color: aquamarine;
margin-top: 50px;
padding-top: 50px;">
블록 요소 확인
<!-- div == 가로공간을 가득차게 만들어준다. (block 모델 요소) -->
<!-- b도 마찬가지로 가로공간을 가득차게 만들어준다. (block 모델 요소) -->
</div>
<p>
<!-- 테두리를 기준으로 안쪽을 패딩(padding), 바깥쪽을 마진(margin)이라고 부른다.-->
파라그래프
<span style="background-color: rgb(255, 0, 0);">인라인 요소</span>
파라그래프
</p>
</body>
</html>
id와 class
id
(스타일을 지정할 때 한가지만 지정해서 쓰는 이름이다. 명시방식은 #이름)
예를 들어 div태그에 여러 속성들을 주게된다면 div태그의 요소들은 모두 해당 속성이 적용되게 된다.
만약 특정한 요소에만 속성을 적용하고싶다면, 선택자인 id를 오픈태그에 명시해주면된다.
한마디로 타 프로그래밍언어의 변수를 선언해준다고 보면 된다.
아래의 코드에서 같은 div태그이지만 id값을 다르게 주어 다른 색상의 div 요소를 만들 수 있었다.
class
(그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이다. 명시방식은 .이름)
id와 다르게 중복이 가능하다. 클래스 명을 여러 태그에 동시에 적용시킬 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Block 요소</title>
<style>
/* 요소 선택자 작성 */
/*id값 선택자 #id값*/
#aqua-div {
background-color: aquamarine;
margin-top: 50px;
padding-top: 50px;
}
#pink-div {
background-color: pink;
margin-top: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<!-- id 값은 무조건 고유하게 줘야한다.-->
<div id="aqua-div">
블록 요소 확인
<!-- div == 가로공간을 가득차게 만들어준다. (block 모델 요소) -->
<!-- b도 마찬가지로 가로공간을 가득차게 만들어준다. (block 모델 요소) -->
</div>
<p>
<!-- 테두리를 기준으로 안쪽을 패딩(padding), 바깥쪽을 마진(margin)이라고 부른다.-->
파라그래프
<span style="background-color: rgb(255, 0, 0);">인라인 요소</span>
파라그래프
</p>
<div id="pink-div">
다른 div 블록 요소
</div>
</body>
</html>
'HTML CSS' 카테고리의 다른 글
| [HTML CSS] 키워드 정리 3 (0) | 2023.01.19 |
|---|---|
| [HTML CSS] 키워드 정리 2 (0) | 2023.01.18 |
| [HTML CSS] 키워드 정리 1 (0) | 2023.01.17 |
