티스토리 뷰
1. CSS 선택자
- 1 ) 태그 선택자 ( 태그 )
- : 태그의 영역을 선택하고 이후에 오는 CSS 명령을 해당 영역에 적용한다.
- : 선택자에 태그명을 그대로 사용하며, 웹 페이지에서 태그가 사용된 영역 선택하여 해당 영역에 CSS 명령을 적용한다.
- 2 ) id 선택자 ( #아이디명 )
- : 웹 페이지에서 유일무이한 단 하나의 특정 영역을 지정하여 CSS 명령을 적용
- 3 ) class 선택자 ( .class명 )
- : 웹 페이지에서 두 군데 이상의 특정 영역을 지정하여 동일한 CSS를 적용한다.
2. 박스모델의 구성요소
- 박스형태로 된 모든 HTML 요소이다.
- 1 ) border : 경계선
- 2 ) padding : 경계선 내부 간격
- 3 ) margin : 경계선 외부 간격으로, 경계선과 외부의 요소 사이의 간격이다.
3. 레이아웃
- 웹 페이지에 박스, 텍스트, 이미지 등 HTML 요소를 배치하는 것
- 수평 방향의 레이아웃을 인라인 요소라고 하며, 가로 방향으로 배치되는 HTML 요소인 img태그나 span 태그가 이에 해당한다.
- 수직 방향의 레이아웃을 블록요소라고 하며, 세로 방향으로 배치되는 HTML 요소인 p태그나 div 태그가 이에 해당한다.
4. Display 속성
- 기본 속성을 무시하고 인라인 요소와 블록 요소를 사용할 수 있게 해준다.
- Display : inline으로 작성하면, li 태그가 기본적으로 가지고 있는 블록요소를 인라인으로 변경해 준다.
5. Float / Clear 속성
- Float 속성 : 웹 페이지에서 요소를 왼쪽이나 오른쪽에 배치할 수 있게 해준다.
- Clear 속성 : float 속성이 사용된 요소가 그 뒤에 오는 요소와 겹쳐 화면이 깨지는 경우, 뒤의 요소를 float 속성을 해제하여 새로운 줄에 오도록 배치한다.
[ 1. CSS 선택자 연습하기 1 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>CSS - Selector 연습1</title>
<style>
p{
font-size: 14px;
line-height: 180%;
}
/* 태그의 이름을 지정했기에, 태그 선택자 혹은 타입 선택자라고 부른다. */
#fly{
color: red;
font-weight: bold;
}
/* id 속성은 몇 개가 나와도 상관은 없으나, 유니크해야 한다.(**) */
/* id는 유일하게 구분해주는 식별자의 역할을 해야 한다. */
.blue{
color: blue;
/* 이때 color은 전경(글자) 색을 의미한다. */
}
/* class 속성은 id와 같이 요소를 지정해 주지만, 중복을 허용한다.(***) */
/* class는 class="blue a b c"처럼 작성함으로써 class를 여러개 지정할 수 있다. */
/* id 선택자는 #로 시작하고, class 선택자는 .으로 시작한다. (***) */
</style>
<!-- Internal Style Sheet에 해당한다. -->
</head>
<body>
<h3>잠자리란?</h3>
<p><span id="fly">span태그 안에 Lorem1을 사용해 봤습니다. Lorem이라는 단어 하나만 출력이 됩니다.</span>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Veniam quibusdam impedit incidunt natus tempora autem porro, quam quasi, laboriosam quia eaque nulla quidem reiciendis odio est maiores eligendi illo laborum.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <span class="blue">span태그 사용중입니다.</span> Provident, tenetur. Laudantium tenetur iure, culpa eaque perspiciatis aperiam exercitationem
vero voluptates quos error excepturi expedita. <span class="blue">여기에도 span태그 사용중입니다.</span> Sapiente adipisci labore quia ex odio.</p>
</body>
</html>
[ 출력 결과 ]
잠자리란?
span태그 안에 Lorem1을 사용해 봤습니다. Lorem이라는 단어 하나만 출력이 됩니다.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam quibusdam impedit incidunt natus tempora autem porro, quam quasi, laboriosam quia eaque nulla quidem reiciendis odio est maiores eligendi illo laborum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. span태그 사용중입니다. Provident, tenetur. Laudantium tenetur iure, culpa eaque perspiciatis aperiam exercitationem vero voluptates quos error excepturi expedita. 여기에도 span태그 사용중입니다. Sapiente adipisci labore quia ex odio.
[ 2. CSS 선택자 연습하기 2 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>CSS 선택자 연습 2</title>
<style>
body{
font-family: '돋움';
}
h3{
font-family: '맑은고딕';
color: blue;
}
p{
font-size: 14px;
line-height: 150%;
}
li{
list-style-type: square;
font-size: 16px;
}
span{
font-weight: bold;
}
</style>
</head>
<body>
<!-- (h3+p)*2를 통해 간단하게 작성할 수 있다. -->
<h3> - 배낭 여행이란? </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in exercitationem cupiditate quia nemo cum officiis,
quis qui consequuntur debitis minima reiciendis, repudiandae dicta aliquam excepturi autem! Atque, magnam totam?</p>
<h3>배낭 여행의 적용</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo tempore nihil autem repellat possimus,
excepturi dolorum saepe amet illo atque error voluptate quidem ad accusamus reiciendis quam dolores. Mollitia, illo.</p>
<h3>배낭 여행 준비</h3>
<!-- ul>li*4를 통해 간단하게 작성할 수 있다. -->
<ul>
<li><span>여권 준비</span> : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, accusamus?</li>
<li><span>비행기 예약</span> : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo!</li>
<li><span>여행 스케줄</span> : Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, maxime?</li>
<li><span>짐 싸기</span> : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, enim!</li>
</ul>
</body>
</html>
[ 출력 결과 ]
- 배낭 여행이란?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores in exercitationem cupiditate quia nemo cum officiis, quis qui consequuntur debitis minima reiciendis, repudiandae dicta aliquam excepturi autem! Atque, magnam totam?
배낭 여행의 적용
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo tempore nihil autem repellat possimus, excepturi dolorum saepe amet illo atque error voluptate quidem ad accusamus reiciendis quam dolores. Mollitia, illo.
배낭 여행 준비
- 여권 준비 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae, accusamus?
- 비행기 예약 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo!
- 여행 스케줄 : Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, maxime?
- 짐 싸기 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, enim!
[ 3. CSS 선택자 연습하기 3 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>CSS 선택자 연습3</title>
<style>
p{
color: darkgrey;
}
#p1{
color: blue;
}
#p2{
color: green;
}
/* id 속성은 선택자로 #.id명을 사용해야 한다. */
</style>
</head>
<body>
<!-- p*4로 에밋코딩하여, 쉽게 p태그를 생성하였다. -->
<!-- p[id=p]*2를 통해 id가 p인 p태그 2개를 생성할 수도 있다. -->
<p id="p1">안녕하세요.</p>
<p id="p2">반갑습니다.</p>
<p>또 만났군요.</p>
<p>자주 만나서, 좋아요!</p>
</body>
</html>[ 4. CSS 선택자 연습하기 4 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>CSS 선택자 연습 4</title>
<style>
.green{
color: green;
font-weight: bold;
}
.blue{
color: blue;
font-weight: bold;
}
/* class 속성은 CSS 선택자를 .class명으로 사용해야 한다. */
/* span태그 안에서 class를 지정하였기에, span태그 안에 있는 것에만 적용이 된다. */
/* id와 다르게, class는 이와 같이 중복이 가능하다. */
/* 또한 class는 class="blue green"와 같이 class를 여러개 지정할 수 있는데, 이때는 오른쪽에서 왼쪽 순으로 적용이 되며 (**) */
/* 오른쪽에 있던 내용이 왼쪽에 있으면, 왼쪽에 있는 내용으로 변경이 되기에 왼쪽의 내용이 살아남게 된다.(이 경우 blue가 남는다.) */
</style>
</head>
<body>
<!-- h2+ul>(li>span[class=])*5 -->
<h2>쇼핑 뉴스</h2>
<ul>
<li><span class="green">루바토</span> : Lorem ipsum dolor sit amet.</li>
<li><span class="green">라리아네</span> : Lorem ipsum dolor sit amet.</li>
<li><span class="green">우리마트</span> : Lorem ipsum dolor sit amet.</li>
<li><span class="blue">우리몰</span> : Lorem ipsum dolor sit amet.</li>
<li><span class="blue">골드스타</span> : Lorem ipsum dolor sit amet.</li>
</ul>
</body>
</html>[ 5. CSS reset - * ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
/* *는 모든 요소에 적용한다.(***) */
/* 이렇게 적용하면, margin과 padding이 없기에 겹치지는 않는다. */
/* CSS reset */
h3{
border: solid 5px blue;
padding: 20px;
/* padding은 값을 하나만 지정하면 상하좌우 모두 적용이 되지만, 2-3개를 지정할 경우 상우후좌(시계방향 순)으로 적용이 된다. */
margin: 30px;
/* margin은 상하에만 적용이 된다. */
/* margin은 외부 요소의 margin과 겹칠 수 있다. */
box-sizing: border-box;
}
p{
box-sizing: border-box;
}
</style>
</head>
<body>
<h3>웹이란?</h3>
<p> - Lorem ipsum dolor sit amet. <br>
- Lorem ipsum dolor sit amet.<br></p>
</body>
</html>[ 6. 박스모델 구성요소 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
h3{
border: solid 5px #e1285a;
/* 5px의 실선 경계선을 정해진 색상으로 그려라. */
/* solid 외에도, dotted(점선), double(이중실선), dashed(줄선), ridge(3D선) 등을 사용할 수 있다. */
padding: 10px;
/* 안쪽 여백은 10px 크기로 영역을 차지하게 해라 */
/* 컨텐츠를 기준으로 상하좌우 10px의 여백을 주게 된다. */
width: 345px;
/* 컨텐츠 영역의 가로너비 크기를 345px로 지정해라 */
}
</style>
</head>
<body>
<h3>도심 속 생태문화공원 서울대공원</h3>
</body>
</html>[ 7. 박스모델 - padding 연습 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>margin 연습</title>
<style>
p{
width: 500px;
border: solid 2px black;
}
#padding1{
padding: 20px;
/* 컨텐츠 기준으로 상하좌우 모두 20px 여백을 주게 된다. */
}
#padding2{
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 상하좌우를 각자 다른 여백을 준다. */
/* padding: 10px 20px 30px 40px;로 줄 수도 있다. */
}
</style>
</head>
<body>
<h3>서울동물원 소개</h3>
<p id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p id="padding2">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</body>
</html>[ 8. 박스모델 익히기 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
h3{
padding-left: 10px;
border-left: solid 5px blue;
/* 한쪽 border만 표시함으로써 포인트를 줄 수 있다.(*) */
}
p{
width: 500px;
border: 1px solid black;
/* 보통 border(경계) CSS를 지정할 때에는 선의 두께, 선의 종류, 선의 색 순으로 작성한다. */
padding: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<h3>Lorem, ipsum.</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod!</p>
</body>
</html>[ 9. border ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
*{
border: 5px solid purple;
}
/* 모든 요소의 border(경계선)을 보라색으로 표시해 준다. */
</style>
</head>
<body>
<h3>이용요금</h3>
<p>행복카드 소지자는 이 사항에 해당할 때, 무료로 사용이 가능합니다.</p>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
</ul>
</body>
</html>[ 10. 박스모델 익히기 2 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
body{
background-color: lemonchiffon;
}
#button{
/* 박스모델의 컨텐츠 영역의 크기 설정 */
width: 120px;
height: 25px;
/* 박스모델의 안쪽 여백 크기 설정 */
padding: 8px;
background-color: rgb(77, 77, 212);
/* div id = button을 파란색으로 지정하였다. */
color: white;
/* 글자색을 하얀색으로 지정하였다. */
text-align: center;
/* text-align은 텍스트를 어디에 정렬하는 가를 지정하는가이다. */
/* display: inline;를 통해 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 변경할 수 있다. */
/* 블록요소는 컨텐츠의 가로와 세로를 변경할 수 있지만, 인라인 요소는 가로와 세로가 자동으로 지정되기에 변경이 불가능하다. */
box-shadow: 5px 5px 2px rosybrown;
}
</style>
</head>
<body>
<!-- h3+(ul>li*2)+div[id=button]으로 간단하게 작성할 수 있다. -->
<h3>캠핑장 9월 예약</h3>
<ul>
<li>9월분 예약 2019년 8월 16일(수) 14:00부터~</li>
<li>문의 전화 : 031 - 123 - 4567 </li>
</ul>
<div id="button">
자세히 보기 >
<!-- >는 gratter than의 줄임말로 ~보다 크다인 " > "를 의미한다. -->
<!-- <를 작성하기 위해서는 <를 작성하면 된다. -->
</div>
</body>
</html>[ 11. 배경에 이미지 삽입하기 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>웹 페이지 배경에 이미지 삽입하기</title>
<style>
body{
background-image: url('https://picsum.photos/100/100');
/* body에서 background-image를 통해 배경에 사진을 지정할 수 있다. */
/* picsum을 통해서 이미지를 가져올 경우, 다소 시간이 걸릴 수도 있다. */
/* background-repeat: no-repeat; */
/* background-repeat: no-repeat;을 통해 사진을 반복시키지 않을 수 있다. */
/* background-repeat: repeat-x; */
/* 배경사진을 가로축 방향으로만 반복할 수 있다. */
/* background-repeat: repeat-y; */
/* 배경사진을 세로축 방향으로만 반복할 수 있다. */
background-repeat: space;
/* 배경사진을 공간을 띄워가면서 반복할 수 있다. */
}
h3{
background-color: antiquewhite;
padding:15px;
}
</style>
</head>
<body>
<h3>배경에 이미지 삽입하기</h3>
<img src="https://picsum.photos/400/267?blur=1" alt="">
<!-- blur은 그림을 흐리게 하는 정보이며 1부터 10까지 지정할 수 있다. -->
<!-- picsum을 통해 그림을 지정할 수 있으며, id를 지우면 사진이 랜덤으로 바뀐다. -->
</body>
</html>[ 12. 레이아웃의 기초 ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>레이아웃의 기초 1</title>
<style>
li{
list-style-type: none;
}
#v_menu{
width: 150px;
}
#v_menu li{
padding: 5px;
border-bottom: 1px dotted black;
}
#h_menu li{
display: inline;
/* 목록을 가로형태로 바꾸어준다.(**) */
}
.menus{
margin: 0 20px 0 20px;
/* 목록과 목록 사이에 여백을 주었다. */
/* 상하를 제외한 좌우에만 20px의 여백을 주었다. */
/* 단 이러한 여백이 생기는 것은 class=menus인 요소만 해당되기에, 목록 중 |는 해당되지 않는다. */
color: rgb(33, 133, 99);
}
</style>
</head>
<body>
<h3>1. 세로 메뉴</h3>
<ul id="v_menu">
<li>CEO 인사말</li>
<li>조직도</li>
<li>전화번호 안내</li>
<li>찾아오시는 길</li>
</ul>
<!-- ----------------------------- -->
<h3>2. 가로 메뉴</h3>
<ul id="h_menu">
<li class="menus">회사소개</li>
<li>|</li>
<li class="menus">제품안내</li>
<li>|</li>
<li class="menus">고객센터</li>
<li>|</li>
<li class="menus">매장안내</li>
</ul>
</body>
</html>[ 13. float 속성 (***) ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>float 속성(*****)</title>
<style>
*{
padding: 0;
margin: 0;
/* padding과 margin을 0으로 만들면, border도 사라져서 컨텐츠만 남는다. */
}
/* *는 전체 선택자로, 모든 태그를 선택하는 선택자이다. */
body{
margin: 10px;
}
li{
list-style-type: none;
}
#image{
float: left;
/* 이 요소를 원래의 표시 위치에서 붕 띄워서, 뷰포트의 왼쪽으로 보내버린다. */
border: 1px solid rgb(243, 81, 81);
}
/* image div태그를 왼쪽으로 옮기고 경계선을 1px로 나타낸다. */
#desc{
float: left;
/* 이 요소를 원래의 표시 위치에서 붕 띄워서, 뷰포트의 왼쪽으로 보내버린다. */
width: 300px;
margin-left: 30px;
border: 1px solid rgb(243, 81, 81);
}
/* 두번째 div태그인 desc의 컨텐츠 넓이와 margin넓이를 지정하고 border을 표시했다. */
/* margin을 주지 않으면, image div태그와 desc div태그 모두 왼쪽으로 옮겼기에 빈 공간 없이 붙어 버린다. */
#menu{
float: right;
/* 이 요소를 원래의 표시 위치에서 붕 띄워서, 뷰포트의 오른쪽으로 보내버린다. */
border: 1px solid rgb(243, 81, 81);
padding: 20px;
font-weight: bold;
}
/* 현재의 요소가 어느 태그인지 확인해야 한다. */
/* ul태그를 오른쪽으로 옮긴 후에 글씨를 굵게, border과 padding을 다음과 같이 변경하였다. */
#menu li{
padding: 5px;
border-bottom: 1px dashed rgb(243, 81, 81);
}
/* 부모와 자식의 관계 상에 있다면, 이와 같이 작성하여 활용할 수 있다. */
/* float을 사용하면 블록요소일지라도 더 이상 행(공간)을 차지하지 못하게 된다. (***) */
</style>
</head>
<body>
<div id="image">
<img src="https://picsum.photos/id/684/200/300" alt="">
</div>
<div id="desc">
<h3>강아지 풀</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore.</p>
</div>
<!-- div태그는 공간 분리 태그이다. -->
<ul id="menu">
<li>강아지풀</li>
<li>패랭이꽃</li>
<li>할미꽃</li>
<li>코스모스</li>
</ul>
</body>
</html>[ 14. float 속성 익히기 (**) ]
<!DOCTYPE html>
<html lang="ko">
<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">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
/* CSS reset */
li{
list-style-type: none;
}
/* 1st div */
#head{
background-color: #f6f5ef;
}
/* 1st div태그의 1st 자식 div 태그 */
#logo{
float: left;
margin: 20px 0 10px 20px;
border: 1px solid rgb(233, 118, 118);
}
/* 1st div태그의 2nd 자식 div 태그 */
#top{ /* GNB (글로벌 네비게이션 바) */
float: right;
margin: 30px 20px 0 0;
border: 1px solid rgb(233, 118, 118);
}
/* ul */
#menu{
clear: both;
/* 전파되어오는 float 속성의 효과를 제거하는 속성 */
/* float되어오는 방향을 잘 파악하지 못할 때에는 both로 지정해서 clear: both라고 작성한다. */
height: 40px;
background-color: #443e58;
color: white;
text-align: center;
padding-top: 15px;
font-size: 20px;
border: 3px solid rgb(110, 84, 84);
}
/* ul 태그의 자식인 li태그 */
#menu li{
display: inline;
}
/* li */
.item{
margin: 0 30px 0 30px;
/* 각 항목이 붙지 않도록 적절한 여백 부여 */
}
</style>
</head>
<body>
<div id="head">
<div id="logo">
<img src="https://picsum.photos/263/41" alt="" title="로고자리입니다." style="display: block;">
</div>
<div id="top">
로그인 | 회원가입 | 공지사항
</div>
</div>
<ul id="menu">
<li class="item">HTML</li>
<li>|</li>
<li class="item">CSS</li>
<li>|</li>
<li class="item">JavaScript</li>
<li>|</li>
<li class="item">Python</li>
<li>|</li>
<li class="item">PHP</li>
<li>|</li>
<li class="item">Java</li>
</ul>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 58일차 - CSS 기본다지기 4 (***) (0) | 2022.05.19 |
|---|---|
| KH 57일차 - CSS 기본 다지기3 (0) | 2022.05.18 |
| KH 55일차 - HTML / CSS 기본 다지기 (0) | 2022.05.16 |
| KH 54일차 - HTML5 (***) (0) | 2022.05.13 |
| KH 53일차 - INDEX (***) / 사용자 관리 (0) | 2022.05.12 |
댓글