04.24 코드 복습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 웹페이지</title>
</head>
<body>
<button onclick="alert('hi')">눌러보셈</button>
</body>
</html>
button
이번에 사용한 button의 기능 중 onclick 이라는 속성을 사용하여 클릭이 되었을 경우 alert 안에 있는 메세지를 창으로 띄울 수 있도록 코드를 작성하였다.
여기서 주의할 점은 alert 안에 큰 따옴표(" ")를 사용 시 에러가 날 수 있으므로 작은 따옴표(' ')를 사용하여 작성하자
alert를 단독으로 사용 할 경우 웹 브라우저 실행 시 바로 창이 띄워진다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step2_img.html</title>
</head>
<body>
<h1>이미지출력하기</h1>
<!-- 상대 결로에 있는 이미지 로딩-->
<img src="images/cat.jpeg.jpg" alt="고양이가 개를 추격하는 모습">
<!-- 절대 경로(파일시스템)에 있는 이미지 로딩-->
<img src="C:\Users\user\playground\visual_work\html\images\cat.jpeg.jpg" alt="고양이가 개를 추격하는 모습">
<!-- 절대경로(웹)에 있는 이미지 로딩-->
<img src="https://picsum.photos/id/237/200/300" alt="강아지 사진">
<img src="https://picsum.photos/200/300">
</body>
</html>img
img 에는 src와 alt라는 속성이 있으며, src에는 첨부하고 싶은 사진의 웹 주소(url) 또는 파일시스템에 있는 사진 주소를 작성한다.
alt에는 사진을 부가설명하는 문구를 작성한다.
필수는 아니므로 필요없을 경우, 생략이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step03_blockelement.html</title>
<style>
/* 모든 div 요소에 적용할 css */
div{
background-color: antiquewhite;
}
/* id 가 one 인 요소에 적용할 css */
#one{
color: blue;
}
/* id 가 two 인 요소의 자식요소 중에서 img 에 적용할 css*/
#two > img{
border-width: 1px;
border-style: solid;
border-color: red;
}
#three > img {
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>div 요소는 문단을 나타낼때 사용합니다</div>
<div id="one">문단에 해당하는 것은 문자열 뿐만이 아니고 다른 여러가지 요소도 될수 있습니다.</div>
<div>div 요소는 폭을 100% 차지하는 block 요소 입니다.</div>
<div id ="two">
<!-- 이 div 요소는 2개의 img 요소를 자식 요소로 가지고 있습니다.-->
<img src="images/kim1.png">
<img src="images/kim2.png">
</div>
<div id = "three">
<img src="images/image1.png">
<img src="images/image1.png">
</div>
</body>
</html>div
div는 division(나눈다)의 줄임말로 문단을 나타낼때 사용하며 줄바꿈을 해준다.
id가 각각 one, two, three라는 이름의 요소를 정의하고, 각각의 다르게 css를 적용할 수 있다.
#two > img 를 통하여 two 요소의 자식요소를 지정하여 css를 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>step04_inlineElement.html</title>
<style>
/* # 은 id 에 연관*/
#one {
color: red;
}
/* . 은 클래스 속성 */
.text-bold{
font-weight: bold;
}
.block-element{
display: block; /* inline | block | inline-block | none | table 등등... */
}
</style>
</head>
<body>
<h1>인라인 요소에 대해 알아보기</h1>
<span>하나</span>
<span>두울</span>
<span>세엥</span>
<p>나의 이름은 <span id = "one">김구라</span> 입니다.</p>
<p>너의 이름은 <span class = "text-bold">해골</span> 입니다.</p>
<p>우리의 이름은 <span class = "text-bold">원숭이</span> 입니다.</p>
<h2>기본 스타일을 가지고 있는 인라인 요소</h2>
<!-- b 요소는 단순히 굵은 글씨 -->
<p>천리길도 <b>한걸음</b> 부터</p>
<!-- strong 요소는 굵은 글씨 + 강조 의 의미도 가지고 있다. -->
<p>천리길도 <strong>한걸음</strong> 부터</p>
<!-- i 요소는 단순히 이텔릭체 -->
<p>여러분 <i>즐거운</i> 프로그래밍이 시작 되었어요</p>
<!-- em 요소는 이텍릭체 + 강조 의 의미도 가지고 있다. -->
<p>여러분 <em>즐거운</em> 프로그래밍이 시작 되었어요</p>
<p>인라인 요소는 보통 블럭요소의 자식 요소로 포함되어 있다.</p>
<p>인라인 요소가 블럭요소를 자식요소로 포함 시킬수는 없다(a 요소는 예외)</p>
<p>
원한다면 인라인 요소를 블럭요소로 만들수도 있고
블럭요소를 인라인 요소로 만들수도 있다.
</p>
<span class="block-element">첫번째 span</span>
<span class="block-element">두번째 span</span>
<span class="block-element">세번째 span</span>
</body>
</html>inline 요소
b 태그는 단순히 강조하는 목적으로 사용하지만 strong 태그는 굵은 글씨와 함께 강조의 의미도 가지고 있다. 시각 장애인 분들이 텍스트로 들을 때 발음을 강조해준다고 한다.
i 태그와 em 태그 역시 같은 이텔릭체를 사용하지만 em 태그는 강조의 의미가 포함된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>step05_ul.html</title>
<style>
.my-ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.my-ul > li {
display: inline;
}
</style>
</head>
<body>
<h1>순서 없는 목록(unordered list) ul 요소</h1>
<h2>친구 목록입니다 ( ul 의 스타일 변경 )</h2>
<ul class = "my-ul">
<li>김구라</li>
<li>해골</li>
<li>원숭이</li>
</ul>
<h2>바로 가기 목록입니다</h2>
<ul>
<li><a href="http://daum.net">daum</a></li>
<li><a href="http://naver.com">naver</a></li>
<li><a href="http://gmarket.co.kr">gmarket</a></li>
</ul>
</body>
</html>ul
ul은 li 태그와 함께 사용하며 목록을 지정할 때 쓰인다.
