728x90

색입히기

<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
	background : goldenrod;
	padding : 10px 10px 10px 50px; /* 위 오른쪽 아래 왼쪽 */
}

ul li { /* ul의 자손 li */
	background : greenyellow;
	margin-bottom : 5px;
}

    </style>
</head>

<body>
    <h3>커피 메뉴</h3>
    <hr>
    <ul>
        <li>Espresso</li>
        <li>Cappuccino</li>
        <li>Cafe Latte</li>
    </ul>
</body>

</html>

 

 

마커의 위치

  list-style-position : inside | outside;

 

 

 

 

마커의 종류

 

 

 

꾸미기 예시)

<!DOCTYPE html>
<html>

<head>
    <style>
        #menu {
            background-color: goldenrod;
        }
        #menu > ul{
            margin: 0;
            padding: 0;
            width: 600px;
        }
        #menu ul li{
            display: inline;
            list-style-type: none;
            padding: 0px 20px; /* 위 오른쪽 아래 왼쪽 */
        }
        #menu ul li a{
            color: aqua;
            text-decoration: none;
        }
        #menu ul li a:hover{
            color: red;
        }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a href="#">Espresso</a></li>
            <li><a href="#">Cappuccino</a></li>
            <li><a href="#">Cafe Latte</a></li>
        </ul>
    </div>
</body>

</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
     ul {
        list-style: none;
        }
        
     ul li{
        display: inline-block;
        padding: 20px;
        margin:0 20px;
        border: 1px solid black;
     }   
    </style>
  
</head>
<body>
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
    </ul>
 
    
</body>
</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 간단 예시  (0) 2024.03.27
[CSS] 표 꾸미기  (0) 2024.03.26
[CSS] 박스배치(position)  (0) 2024.03.26
[CSS] 박스 유형 제어(display)  (0) 2024.03.26
[CSS] 텍스트 + 박스모델 종합예시  (0) 2024.03.26
728x90

normal flow

  • 웹 페이지에 나타난 순서대로 HTML 태그 배치
  • position 프로퍼티를 이용하여 normal flow 무시 가능
 

position 프로퍼티를 이용한 배치 방법

  • 정적 배치 - position : static(디폴트)
  • 상대 배치 - position : relative
  • 절대 배치 - position : absolute
  • 고정 배치 - position : fixed
  • 유동 배치 - float : left 혹은 float : right

position 프로퍼티를 사용할 때, 태그의 위치와 크기

  • top, bottom, left, right, width, height 프로퍼티로 지정
    • 이들 프로퍼티는 배치 방법에 따라 다르게 사용됨

 

absolute → 부모를 찾는다(relative를 찾아야함) → 부모가 있으면 부모 안에서만 움직인다
행동기준 - 부모가 있는 위치
relative가 있는 부모 태그의 좌측 상단이 기준이 된다

부모 중 relative가 없다면, body tag 기준으로 움직인다

 

 

absolute 예시)

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div{
            display: inline-block;
            position: absolute;
            border: 1px solid grey;
        }
        div p{
            display: inline-block;
            position: absolute;
            height: 20px;
            width: 50px;
            background-color: grey;
        }

    </style>
</head>



<body>
    <div>
        <img src="다운로드.jpg" width="200" height="200">
        <p style="left:30px; top:30px">JAVA</p>
    </div>
</body>

</html>

 

 

pixed 예시)

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #a{
            position: fixed;
            right: 10px;
            width: 100px;
            bottom: 20px;
            background-color: aquamarine;
        }
    </style>
</head>



<body>
    <div>
        <img src="다운로드.jpg" width="200" height="200">
        <p id="a">JAVA</p>
    </div>
</body>

</html>

 

 

종합예시)

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Position</title>
	<style>
		.container {
			border: 3px solid red;
			width: 100%;
			height: 1000px;
			position: relative;
		}
		.position {
			width: 150px;
			height: 50px;
			top: 100px;
			left: 120px;
		}
		.static {
			border: 3px solid black;
			position: static;
		}
		.relative {
			border: 3px solid green;
			position: relative;
		}
		.fixed {
			border: 3px solid orange;
			position: fixed;
		}
		.absolute {
			border: 3px solid blue;
			position: absolute;
		}
	</style>
</head>

<body>

	<h1>정적 위치(static position) 지정 방식의 특징</h1>
	<div class="container">
		<div class="static position">정적 위치(static position)</div>
		<div class="relative position">상대 위치(relative position)</div>
		<div class="fixed position">고정 위치(fixed position)</div>
		<div class="absolute position">절대 위치(absolute position)</div>
	</div>

</body>

</html>

출처 - https://www.tcpschool.com/examples/tryit/tryhtml.php?filename=css_position_position_05

 

©TCP-tryWWW

CSS Position .container { border: 3px solid red; width: 100%; height: 1000px; position: relative; } .position { width: 150px; height: 50px; top: 100px; left: 120px; } .static { border: 3px solid black; position: static; } .relative { border: 3px solid gree

www.tcpschool.com

 

 

 

문제)

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            background-color: gray;
            width: 500px;
            height: 150px;

        }

        #static {}

        #relative-1 {
            position: relative;

        }

        #relative-2 {
            background-color: gray;
            width: 500px;
            height: 200px;
            position: absolute;
            left: 100px;
            top: 400px;
        }

        #fixed {
            background-color: black;
            width: 150px;
            height: 150px;
            position: fixed;
            right: 30px;
            top: 30px;
        }
    </style>
</head>



<body>
    <div>
        <p id="static">Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem
            eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Pariatur
            fugiat voluptate ea non amet cupidatat. </p>
    </div>
    <div>
        <p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit
            consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud
            labore cillum non exercitation voluptate. </p>
    </div>
    <div>
        <p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum
            commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
    </div>
    <p id="fixed"></p>

</body>

</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 표 꾸미기  (0) 2024.03.26
[CSS] 리스트/아이템 꾸미기  (0) 2024.03.26
[CSS] 박스 유형 제어(display)  (0) 2024.03.26
[CSS] 텍스트 + 박스모델 종합예시  (0) 2024.03.26
[CSS] 박스모델  (0) 2024.03.26
728x90

display : block

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        span { 
    background-color: aquamarine;
	display : block;
	width : 100px;
	height : 60px;
 }

    </style>
</head>

<body>
    <div>
        <span>block span</span>과 <span>block span</span>입니다.
    </div>
</body>

</html>

 

 

 

display : inline

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
  div div {
	display : inline;
}

    </style>
</head>

<body>
    <div style="background : orange">
        <div>inline DIV</div>
        <div>inline DIV</div>
        <div>inline DIV</div>
    </div>
    
</body>

</html>

 

 

 

display : inline-block

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
div div {
	display : inline-block;
	border : 2px dotted orangered ;
	background : powderblue;
	margin : 10px;
	width : 60px; height : 80px;
}

    </style>
</head>

<body>
    <div style="background : orange">
        <div>inline-block DIV</div>
        <div>inline-block DIV</div>
        <div>inline-block DIV</div>
    </div>
    
    </div>
    
</body>

</html>

 

 

 

 

 

 

종합 예시)

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
div{
    border: 1px solid navy;
    color: red;
    background-color:gold;
}

    </style>
</head>

<body>

css<div style="display: none;">재밌음</div><br>
css<div style="display: inline; height: 50px;">재밌음</div><br>
css<div style="display: inline-block; height: 50px;">재밌음</div><br>
css<span style="display: block;">재밌음</span>
  
</body>

</html>

 

728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 리스트/아이템 꾸미기  (0) 2024.03.26
[CSS] 박스배치(position)  (0) 2024.03.26
[CSS] 텍스트 + 박스모델 종합예시  (0) 2024.03.26
[CSS] 박스모델  (0) 2024.03.26
[CSS] 텍스트 정렬 / 폰트  (0) 2024.03.26
728x90

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        h2 {
            background-color: black;
            color: white;
            text-align: left;
            padding: 20px;
            margin: 0;
        }

        h3 {
            color: red;
            text-align: center;
        }

        span {
            color: blue;
        }

        body {
            text-align: center;
        }

        p {
            font-weight: bold;
        }

        div {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h2>확인하세요</h2>
    <div>
        <h3>주문 및 배송</h3>
        <p>
            <span>오후 2시 이전</span>주문 건은 당일 발송합니다.
            2시이후 주문건은 다음날 발송됩니다.(주말 제외)
        </p>
        <hr>

        <h3>교환 및 환불</h3>
        <p>
            불만족시 <span>100% 환불</span>해드립니다.<br>
            고객센터로 전화주세요. </p>
        <hr>

        <h3>고객센터</h3>
        <p>
            0000-0000<br>
            <small>상담시간 : 오전 9시 ~ 오후6시(토/일,공휴일 휴무)</small>
        </p>
    </div>
</body>

</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 박스배치(position)  (0) 2024.03.26
[CSS] 박스 유형 제어(display)  (0) 2024.03.26
[CSS] 박스모델  (0) 2024.03.26
[CSS] 텍스트 정렬 / 폰트  (0) 2024.03.26
[CSS] 텍스트  (0) 2024.03.25
728x90
  • HTML 태그는 사각형 박스로 다루어진다
  • 각 HTML 태그 요소를 하나의 박스로 다룸
  • 박스 크기, 배경 색, 여백, 옆 박스와의 거리 등 제어 가능

 

예시)

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            background-color: cornflowerblue;
        }

        span {
            background-color: green;
        }
        
        div.a {
            background-color: gold;
            border-style: solid;
            border-color: violet;
            width: 150px;
            height: 50px;
            margin: 40px;
            border-width: 30px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="a">
        <span>HTMLCSS</span>
    </div>

</body>
</html>

 

 

 

이미지 테두리 만들기

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div{
            background-color: black;
            padding: 20px;
            border: 5px dotted bisque;
            margin: 30px;
        }
    </style>
</head>

<body>
    <div>
        <img src="다운로드.jpg" alt="Sonny"
    </div>
</body>
</html>

 

 

테두리 디자인

<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
    <!--<p style="border-color: blue; border-style: solid; 
        border-width: 3px;"></p>-->
    <p style="border: 3px solid blue;">3픽셀</p>
    <p style="border: 3px none blue;">3픽셀</p>
    <p style="border: 3px hidden blue;">3픽셀</p>
    <p style="border: 3px dotted blue;">3픽셀</p>
    <p style="border: 3px double blue;">3픽셀</p>
    <p style="border: 3px groove blue;">3픽셀</p>
</body>
</html>

 

 

모서리

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        p{
            background-color: chocolate;
            width: 200px;
            padding: 20px;
            /* margin이나 padding 에도 동일하게 적용된다 */
        }
        #r1{ border-radius: 50px;} 
        /*하나의 값만 설정하면 4개 위치에 다 적용 */
        #r2{ border-radius: 0px 20px 40px 60px;}
        /* 왼쪽 상단부터 1, 2, 3, 4번 순서 */
        #r3{ border-radius: 0px 20px 40px;}
        /* 0 20 40 20  1/3 2.4 짝꿍! */
        #r4{ border-radius: 0px 20px;}
        /* 0 20 0 20 */
        #r5{ border-radius: 50px; border-style: dotted;}
    </style>
</head>

<body>
    <p id="r1">반지름</p>
    <p id="r2">반지름</p>
    <p id="r3">반지름</p>
    <p id="r4">반지름</p>
    <p id="r5">반지름</p>
</body>

</html>

 

728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 박스 유형 제어(display)  (0) 2024.03.26
[CSS] 텍스트 + 박스모델 종합예시  (0) 2024.03.26
[CSS] 텍스트 정렬 / 폰트  (0) 2024.03.26
[CSS] 텍스트  (0) 2024.03.25
[CSS] 셀렉터  (0) 2024.03.25
728x90

정렬

 

 

<!DOCTYPE html>
<head>
    <style>
        h3{text-align: :right;}
        .p1{text-indent: 4em;
            text-align: justify;}
        span{text-decoration: line-through;}
        .p2{
            text-indent: 1em;
            text-align: center;
        }    
        strong{text-decoration: ;}
    </style>   

</head>
<body>
    <h3>텍스트 디자인</h3>
    <hr>
    <p class="p1"> 오늘 대한민국 vs 태국 2차전 20:00
    <span>이강인 선발?</span>출전하나?<p>

    <p class="p2"> 2:0으로는
    <strong>이겨야</strong>
    한다</P>
</body>
</html>

 

 

 

 

폰트

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    body{
        font-family: 'Courier New', Courier, monospace;
        font-size: large;
    }
    
</style>
</head>
<body>
    <p style="font-weight: 900;">font-weight 900</p>
    <p style="font-weight: 100;">font-weight 100</p>
    <p style="font-style: italic;">font-style<</p>
    <p style="font-style: oblique;">font-style2</p>
    <p> 현재 크기의 <span style="font-size: 1.5em;">1.5배</span></p>
</body>
</html>

 

 

그림자 / 흐림

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #r1 {
            text-shadow: 3px 3px;
        }

        #r2 {
            text-shadow: 3px 3px red;
        }

        #r3 {
            text-shadow: 3px 3px 5px blue;
        }

        #r4 {
            text-shadow: 0px 0px 3px black;
            color: white;
        }

        #r5 {
            color: gold;
            text-shadow: 2px 2px 2px black,
                0 0 25px red,
                0 0 5px olivedrab;

        }
    </style>
</head>

<body>
    <p id="r1">그림자</p>
    <p id="r2">그림자</p>
    <p id="r3">그림자</p>
    <p id="r4">그림자</p>
    <p id="r5">그림자</p>
</body>

</html>
728x90

'StyleSheet > CSS' 카테고리의 다른 글

[CSS] 텍스트 + 박스모델 종합예시  (0) 2024.03.26
[CSS] 박스모델  (0) 2024.03.26
[CSS] 텍스트  (0) 2024.03.25
[CSS] 셀렉터  (0) 2024.03.25
[CSS] 스타일 시트  (0) 2024.03.25

+ Recent posts

티스토리툴바