- 요소 - block , inline 사용해보기
출력 결과를 볼 때 태그의 사용에 따라 문자의 출력 방식이 다르다는걸 알 수있다
이유는 h , b , p 태그는 block 요소(태그)이기 때문이다
출력하면 위아래 +1까지 영역으로 아무도 올 수 없다
하지만 strong , i , del , sub , sup 태그는 inline 요소(태그)이기 때문에
출력문까지만 자신의 영역으로 옆에 붙어서 출력된다
이해가 안된다면 아래 사진을 참고하자!
- block 요소(태그)
- inline 요소(태그)
- 이미지 올려보기 / link 걸어보기
a 태그도 inline 요소(태그)이기 때문에 붙어서 출력되는걸 확인할 수 있다
href 속성은 링크를 받아 저장해주고 target속성은 열림 방식을 의미한다
또한 태그의 시작과 끝 사이에 링크 위치를 특정할 수 있게 문자를 넣어준 모습이다
img 태그는 마무리가 없는 태그이다
문법은 <img src=" " alt=" "> 이다
src : 출력할 이미지 경로를 작성해준다
alt : 해당 위치에 이미지가 보이지 않을 경우를 설정한다
. / 는 해당 폴더에서 이미지를 찾는다
.. /는 해당폴더의 상위 폴더에서 내에서 이미지를 찾는다
(해당 스크립트가 저장되는 폴더를 기준으로 한다)
- 출력 이미지의 크기 조절
- 이미지를 클릭하면 사이트 이동
href 속성으로 링크를 받고 target을 이용하여 열림 방식을 설정
img 태그로 이미지의 경로를 찾아 출력했다
- 태그 선택자
<style>
/* div 요소에 배경색 적용 */
div {
background-color: yellow;
color: brown;
}
/* h2 요소에 글자색 적용 */
h2 {
color: hotpink;
}
</style>
body 태그에 있는 요소를 직접적으로 집어서 style 태그를 사용하는것을
태그 선택자라고 한다
실행 결과 값을보면 div 요소가 2개 사용되었지만 태그 선택자로 div를 지목했기 때문에
body안에 있는 모든 div 태그가 적용된다
- id 선택자
<style>
/* id1 적용된 요소 스타일 지정 */
#id1 {
background-color: orange;
color: #9b5252;
}
#id2 {
background-color: red;
color: bisque;
}
</style>
<body>
<div id="id1">
div태그입니다
</div>
<p id="id2">
p태그입니다
</p>
</body>
id태그는 말그대로 지정된 id에 style을 입히는것으로
body태그안에 div요소를 id1 p요소를 id2로 지정하고 지정한 아이디를 조건으로
style을 넣어주는걸 말한다
- .class 선택자
<style>
.class1 {
color: red;
}
.class2 {
background-color: yellow;
}
</style>
<body>
<h2 class="class2 class1">
h2태그입니다
</h2>
<div class="class1 class2">
안녕하세요
</div>
</body>요소를 class로 만들어 선택해 사용하는것을 class선택자라고 한다
class선택자의 특징은 style에서 지정한 class를 중복해서 사용이 가능하다는것이고
사용할 class 띄어쓰기 class로 매우 쉽다
- 선택자 주의사항
1) id선택자는 중복해서 사용불가능하다 id로 선언할때 같은 id이름도 선언 불가능하다
2) class 선택자는 생성하면 다른 class선택자와 중복이 가능하다 (단 같은 class 이름은 사용 불가능하다)
3) id선택자와 class 선택자를 같이 사용하는 경우 id선택자가 우선순위이기 때문에
id선택자로 출력이 이루어진다 (같이 사용해도 id선택자로 적용된다)
- 폰트 변경하기
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
먼저 변경하고 싶은 폰트가 필요하기 때문에 google fonts를 이용했다
먼저 마음에 드는 폰트를 찾아 들어간다
이후 아래로 조금만 내리면 Select Regular가 보이는데 클릭한다
오른쪽 상단에 장바구니?를 눌러준다
그럼 장바구니?가 열리는데 긴코드는 <head> 안에 넣어준다
아래 짧은 코드는 style 태그 안에 넣어준다
어디에 넣을지 모르겠다면 아래를 참고하자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 폰트 변경! -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle&display=swap" rel="stylesheet">
<!-- 폰트변경 끝! -->
<title>Document</title>
<style>
/* div 태그로 작성된 요소에 폰트 적용 */
* {
font-family: 'Dongle', sans-serif;
}
</style>
</head>
<body>
</body>
<div>모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</div>
<p>여기는 어떻게 보일까요?</p>
</html>
참고로 출력 내용은 구글폰트 기본으로 작성 되었다
꼭 style 태그 안에 font를 적용하는 문구를 작성해주자!
* { < * 은 전체 요소를 뜻한다 개별로 하고싶다면 선택자를 사용하자
font-family: 'Dongle', sans-serif;
}