23.02.09(head, .css, 선택자(태그/id/class), (블록/인라인)레벨, em, display, margin-padding)

😀

CSS

<h3>CSS 특징</h3>

<ol>
<li>Cascading style Sheet</li>
<li>HTML 문서에 스타일(디자인)을 적용하는 언어</li>
<li>CSS 사용 방법 : 인라인 방식(태그에 직접 적용), head영역, 외부 파일(.css)</li>

</ol>

<ul>
<li>CSS 형식 : 선택자{속성: 값;}</li>
<LI>선택자 : BODY 태그에서 선언한 태그</LI>
<li>하위 태그 지정 : 상위태그 하위태그{속성: 값}</li>
</ul>

😀head영역

</title>
<style type="text/css">

    span{
        font-size:
        font-wieght:
        color:
    }
</style>
</head>

😀외부파일

파일확장자가 css인 파일을 만들어서 거기에

span {} 적용

<link rel="stylesheet" href="css/style.css">

- link : 현재 문서와 외부 리소스(*.css) 파일과의 관계를 명시하는 선언
- rel="stylesheet" : 태그로 연결하는 파일이 외부에 있는 스타일시트 파일이라는 뜻을 가지고 있음
- href : 이 속성은 링크된 리소스의 url 경로를 참조함

외부에 스타일시트 파일을 선언하고 사용하는 이유.
==> 대부분의 HTML 파일에 동일하게 스타일을 적용할 수 있다는 장점이 있음
-->

😀

ul li /* 자식을 포함한 자손 */

ul > li /* > 는 자식의 의미 */

<style type="text/css">
	
    body {
    	background-image: url(images/img.jpg);
        background-color: gray;
        background-reapeat: no-repeat;
        background-positon: center;
        size: cover;
    }
    
    ul li {
    	color: lightgray;
    }
    
    ul>li {
    	color: green;
    }

</style>

<body>
	<p>호랑이</p>
    	
    <ul>
    	<li>가위</li>
        <li>바위</li>
        <li>보
        	<ol>
            	<li>1번</li>
                <li>2번</li>
            </ol>
        <li>
    </ul>
</body>

/* 그룹 선택자 */
h2, h3, h4 {
color: tomato; /* 색상은 rgb색상표에서 바로 적용 가능 */
}

😀nth : n 번째 (th)

:nth-of-type(들어갈 수 있는 숫자들 : 1, 2, 2n, 2n+1 등등 )

:nth-of-type(first-child)

:nth-of-type(last-child)

:nth-of-type(odd)

:nth-of-type(even)

/* 순서 선택자 : nth-of-type() */
ul li:nth-of-type(1) {
color: #FF8000;
}

😀선택자가 없는경우

<style type="text/css">

	input[type="text] {
    	border: 1px solid blue;
    }
    
    input[type="password" {
    	border: 1px solid red;
    }

</style>
</head>
<body>
<form>
	<input type="text> <br>
    <input type="password">
</form>

😀태그에 커서가 올라갔을 때

<style type="text/css">
h1:hover {
	color: red;
}

😀id선택자 / class 선택자

id는 #으로 / class는 . 으로 받는다

<style type="text/css">

	#title {
        color: blue;
	}

	.main_text {
        font-weight: bold;
        font-size: 20px;
        color: red;
	}

</head>
<body>
<h1 id="title"> 제목</h1>

<p class="main_text"> 본문</p>

<Style type="text/css">
    h1 {
        font-size: 3em;
    }

    p {
        font-size: 0.8em;
    }

<body>
    <h1> 3em크기의 제목</h1>
    <p> 0.8em 크기의 p태그</p>

list-style-type: none; /* ul의 점 제거하는 속성 */

text-decoration: none; /* a태그 글자 밑에 있는 밑줄을 제거하는 속성 */

display: inline-block; /* 인라인레벨요소로 바꾸주는 속성 */

.block img{
display: block;
}

padding: 20px; /* 박스사이즈 증가하므로 padding을 줄 때는 조심해야 한다. */

box-sizing: border-box; /* @박스사이즈 원상태로 */

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

23.02.10(글자간격, border, text-shadow, float, a href="#", overflow) (0)	2023.02.10

2023코딩

23.02.09(head, .css, 선택자(태그/id/class), (블록/인라인)레벨, em, display, margin-padding)

'CSS' 카테고리의 다른 글

댓글

티스토리툴바

23.02.09(head, .css, 선택자(태그/id/class), (블록/인라인)레벨, em, display, margin-padding)

'CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바