@charset "UTF-8";
ol li {
list-style-type: circle;
list-style-image: url("../img/circle.png");
}
ul li {
list-style-type: "#";
padding-left: 10px;
}
.first {
list-style-position: inside;
}
.second {
list-style-position: outside;
}
<!DOCTYPE html>
<!--
* 디스플레이(display)
1) '화면에 어떻게 표현되는가', '어떻게 위치하는가'를 지정하는 속성
2) 블록 레벨이라면 block, 인라인 레벨이라면 inline 기본 값으로 가짐
3) block
- block으로 지정된 요소는 자기 자신이 위치한 라인의 가로 폭 전체를 차지함
- 항상 새로운 라인에서 시작함
- 예) <div> 태그는 블록 레벨 요소이므로 display 속성을 지정하지 않아도 기본값이 block임
4) inline
- inline으로 지정된 요소는 자기 자신 내용의 크기만큼만 너비를 차지함
- 새로운 라인으로 시작하지 않음
5) inline-block
-inline-block으로 지정된 요소는 inline처럼 동작하나 블록의 특성은 유지함
-inline과는 다르게 사이즈(width, height)나 여백을 지정할 수 있음
* 크기 단위(size)
1) px: 표준 단위
2) em, rem: 부모 크기에 따라 상대적으로 결정되는 단위
3) %: 부모 크기에 따라 상대적으로 결정되는 단위
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style05.css">
</head>
<body>
<div class="block">HTML5</div>
<div class="block">CSS3</div>
<div class="block">JavaScript</div>
<div class="inline">HTML5</div>
<div class="inline">CSS3</div>
<div class="inline">JavaScript</div>
<br>
<div class="inline-block">HTML5</div>
<div class="inline-block">CSS3</div>
<div class="inline-block">JavaScript</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style06.css">
</head>
<body>
<div class="box1">solid</div> <!-- 실선 -->
<div class="box2">double</div>
<div class="box3">dotted</div>
<div class="box4">dashed</div> <!-- 긴 점선 -->
<div class="box5">inset</div> <!-- 박스 영역 오목해 보이는 3차원 선 -->
<div class="box6">outset</div> <!-- 박스 영역 볼록해 보이는 3차원 선 -->
<div class="box7">groove</div> <!-- 오목해 보이는 3차원 선 -->
<div class="box8">ridge</div> <!-- 볼록해 보이는 3차원 선 -->
</body>
</html>
<!DOCTYPE html>
<!--
* 레이아웃 (layout)
1) '배치'라는 뜻
2) 레이아웃 속성을 사용하여 웹 페이지를 구성하는 요소들을 원하는 위치에 배치할 수 있음
* float
1) '뜨다'
2) 웹 페이지에서 이미지를 다룰 때 텍스트와 어우러질 수 있게 배치하기 위한 속성
3) 레이아웃을 만드는데 사용됨
4) float 속성 값 : none, left, right
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style07.css">
</head>
<body>
<div class="title">Title</div>
<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
<!DOCTYPE html>
<!--
* 레이아웃 (layout)
1) '배치'라는 뜻
2) 레이아웃 속성을 사용하여 웹 페이지를 구성하는 요소들을 원하는 위치에 배치할 수 있음
* position
1) 요소의 위치를 지정하는 속성
2) position 속성 값: static -- 위치 기본 값, HTML 문서 내 작성된 순서에 따라 차례대로 위치함
fixed -- 고정 위치를 의미함. 사이즈가 변하거나 스크롤이 생겨도 항상 고정된 자리에 위치함
absolute -- 절대 위치를 의미함. 조상 요소를 기준으로 위치를 지정함
relative -- 상대적 위치를 의미함. 요소의 현재 위치(기본 위치)를 기준으로 위치를 지정함
3) 요소의 위치를 지정하는 속성: top, bottom, left, right
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style08.css">
</head>
<body>
<div class="fixed">Fixed</div>
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>
</body>
</html>
<!DOCTYPE html>
<!--
* 오버플로우(overflow)
1) '범람하다', '흘러넘치다'
2) 요소의 내용이 요소의 크기보다 커서 레이아웃을 벗어날 때를 의미함
3) overflow 속성 사용해 (흘러넘친 내용을) 어떻게 처리할 것인지 지정함
4) overflow 속성 값
: visible, hidden, scroll, auto
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style09.css">
</head>
<body>
<div>
<p>
As Android developers, we are all driven by building experiences that delight people around the world.
And with people depending on your apps more than ever,
expectations are higher and your jobs as developers aren’t getting easier.
Today, at Google I/O, we covered a few ways that we’re trying to help out,
whether it be through Android 12 - one of the biggest design changes ever, Jetpack, Jetpack Compose, Android Studio,
and Kotlin to help you build beautiful high quality apps.
We’re also helping when it comes to extending your apps wherever your users go,
like through wearables and larger-screened devices.
You can watch the full Developer Keynote, but here are a few highlights:
</p>
</div>
</body>
</html>
