CSS - 01

월요일좋아·2022년 8월 12일

목록 보기

1/5

CSS기초

CSS를 적용하는방법에는 두가지가 있다.
1. style태그 이용
2. <head>에서 <style>태그이용
3. css파일을 만든 후, html파일에 링크(link:css + Enter)

1. style태그 이용

<body style="background-color: coral;">
<h1>별다방 카페</h1>
<h2>운영진</h2>
<ul>
    <li class="male" id="ceo">X</li>
    <li class="female">Y</li>
</ul>
<h2>매니저</h2>
<ul>
    <li class="male">P</li>
    <li class="female">Q</li>
</ul>
<h2>알바</h2>
<ul>
    <li class="male">A</li>
    <li class="female">B</li>
    <li class="male">C</li>
    <li class="female">D</li>
</ul>
</body>

style태그를 이용하는 방법은 가독성이 떨어져 잘 이용하지 않는 방법이다.

2. `<head>`에서 `<style>`태그이용

<head>
<meta charset="UTF-8" />
<title>CSS 적용</title>
<!-- style태그 or css 파일 링크 -->
<!-- 방법2 : <head>에서 <style>태그이용 -->
<style>
    /* CSS문법, 내부 스타일시트 */

    body {
        font-size: 30px;
        /* font-size : 글자크기,기본크기는 16px */
        font-family: cursive;
        /* font-family : 글꼴 */
    }

    /* .클래스명{} -> 해당클래스의 스타일 설정 */
    .male {
        color: blueviolet;
    }

    .female {
        color: aquamarine;
    }

    /* 태그가 ul인것 */
    ul {
        list-style: none;
    }

    /* id가 ceo인것 */
    #ceo {
        background-color: red;
    }
</style>
</head>

3. css파일을 만든 후, html파일에 링크(`link:css` + `Enter`)

css파일을 별도로 만들어서 html파일에 연결

/* CSS문법, 내부 스타일시트 */
<style>
body {
    font-size: 30px;
    /* font-size : 글자크기,기본크기는 16px */
    font-family: cursive;
    /* font-family : 글꼴 */
}
/* .클래스명{} -> 해당클래스의 스타일 설정 */
.male {
    color: blueviolet;
}
.female {
    color: aquamarine;
}
/* 태그가 ul인것 */
ul {
    list-style: none;
}
/* id가 ceo인것 */
#ceo {
    background-color: red;
}
</style>

CSS선택자

일반 태그로 선택해서 스타일 변경

<head>
<meta charset="UTF-8" />
<title>셀렉터 기본</title>
<style>
/* 모든 h1태그 선택 */
h1 {
    color: tomato;
}

/* 모든 p태그 선택 */
p {
    color: brown;
    font-size: 14px;
}
</style>

클래스로 선택해서 스타일 변경(.클래스)

<style>
.main {
    background-color: blue;
    color: white;
  }

 .sub {
    background-color: coral;
    color: antiquewhite;
  }
</style>

아이디로 선택(#아이디)
```
#useless {
    font-size: 20px;
    color: red;
    font-weight: bold;
}
```
클래스는 여러요소 적용가능하지만 id는 한 페이지당 단 한개만 가능하다

캐스캐이딩

CSS속성을 한 태그에 여러 속성이 중복해서 적용됐을때의 우선순위 순서.

선택자 우선순위 계산 (specificity 계산)

1. 인라인 스타일 첫번째 순위 ( 1,0,0,0 points)
    - 태그 우선순위는 범위가 작은게 우선임

2. ID 한개당 둘째 순위 ( 0,1,0,0 points )
    - ID는 클래스보다 우선

3. 클래스 세번째 순위 ( 0,0,1,0 points )
 	- 클래스는 일반태그보다 우선

4. 태그 하나당 네번째 순위 ( 0,0,0,1 point )
    - 똑같은 태그일때는 마지막 태그가 우선

<head>
<meta charset="utf-8">
<title>CSS 배우기</title>
<style>
    /* 태그 우선순위는 범위가 작은게 우선임 */
    html {
        color: white;
    }

    /* 똑같은 태그일때는 마지막 태그가 우선 */
    body {
        color: red;
    }

    body {
        color: bisque;
    }

    header {
        color: aqua;
    }

    header h1 {
        color: blue;
    }

    /* 클래스는 일반태그보다 우선 */
    .light {
        color: cornflowerblue;
    }

    /* id는 클래스보다 우선 */
    #first {
        color: yellow;
        background-color: black;
    }
</style>
</head>

<body>
<!-- 머릿말 부분 header -->
<header>
    <h1>CSS 선택자</h1>
    <p>웹사이트 <span>연습</span> 페이지</p>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.</p>

<p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.</p>

<!-- 페이지의 끝부분 footer -->
<footer>
    <p>&copy; 2020 - css 배우기</p>
    <p id="first" class="light">All rights reserved.</p>
</footer>

💻출력

CSS 선택자

웹사이트 연습 페이지

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

박스모델

content: 태그 사이의 내용
padding: 내용과 보더와의 간격
border: 사각 경계선
속성> solid:실선, dotted:점선, dashed:점점선
margin: 보더 바깥의 빈 공간
- 마진을 4개 준다면 상,우,하,좌 순서로 마진 적용
- 마진을 2개만 준다면 순서대로 위쪽/아래쪽 간격 + 왼쪽/오른쪽간격
- 마진을 1개만 준다면 4면 모두 동일하게 마진 적용
.box { margin: 10px 20px 30px 40px }
margin-top margin-bottom

✍실습

<style>
    body {
        /* 마진 초기화 */
        margin: 0;
    }

    .box {
        background-color: aquamarine;
        /* border의 속성 */
        /* solid:실선, dotted:점선, dashed:점점선 */
        border: 5px solid red;
        padding: 30px;
    }
    .a {
        margin-bottom: 30px;
    }
    .box {
        margin-top: 30px;
    }
</style>
</head>
<body>
<!-- div.box + Enter = div태그의 class(box) 생성 -->
<div class="box a">박스 A</div>
<div class="box b">박스

    <Body></Body>
</div>
</body>

단축키 : <body>에서 div.box + Enter = div태그의 box라는 이름의 class 생성

💻출력

박스 A

박스 B

Float레이아웃

요즘은 이 방식을 잘 안쓴다고 한다. 기억도 잘 안나서 넘어가자

내비게이션 메뉴

https://colorhunt.co/ : 유용한 색조합 사이트

내비게이션 CSS

    <style>
    .site-nav li {
       
        list-style: none;
        
        float: left;
        
        margin-right: 5px;
    }
    </style>

li 리스트 앞의 ●을 없애주는 속성: list-style: none
한줄씩 왼쪽으로 붙게 하는 속성 : float: left
각 <li>들을 오른쪽으로 5px씩 마진을 줌 : margin-right: 5px

<style>
.site-nav a {
        display: block;            
        color: #617140;            
        text-decoration: none;
        padding: 10px 20px;            
        border: 3px solid #e5e9dc;            
        border-bottom: none;
    }
</style>

a태그가 인라인이기때문에 block태그로 변경해야 사이즈를 설정해줄수 있음: display: block

❓블럭
- 한 줄에 하나씩 쌓임
- 가로와 세로 길이를 가짐
- 화면 배치를 위해 사용

❓인라인
- 한 줄에 여러 요소가 나옴
- 가로 세로 길이 직접 설정 못함.. 내용물의 크기대로 설정됨
- 텍스트를 꾸밀 때 사용

밑줄을 없애주는 속성 : text-decoration: none
padding 주기 : padding: 10px 20px

<style>
    .site-nav a:hover {
        background-color: #e5e9dc;
    }

    .site-nav a:hover {
        background-color: #54BAB9;
    }
</style>

:hover는 특정 태그에 마우스를 올렸을때의 상황 설정
태그명:hover{마우스올렸을때의 상황}

Website Title

Website slogan included here.

This is main. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi deleniti quod numquam? Quam, facilis impedit? Quam possimus numquam commodi culpa, corporis blanditiis eaque harum quaerat ratione animi magnam! Quas, a.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quo quam expedita vero adipisci similique deleniti fugit maiores odio quas repellat neque, veritatis molestiae accusamus, porro accusantium temporibus tempora sapiente!

This is sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores est modi amet nesciunt repellendus quis maiores expedita distinctio deserunt fugiat, sit laboriosam aspernatur labore rem dolore hic nulla laborum qui.

월요일좋아

다음 포스트

CSS - 01

CSS

CSS기초

1. style태그 이용

2. `<head>`에서 `<style>`태그이용

3. css파일을 만든 후, html파일에 링크(`link:css` + `Enter`)

CSS선택자

캐스캐이딩

선택자 우선순위 계산 (specificity 계산)

💻출력

CSS 선택자

박스모델

✍실습

💻출력

Float레이아웃

내비게이션 메뉴

내비게이션 CSS

Website Title

CSS - 02

0개의 댓글

CSS - 01

CSS

CSS기초

1. style태그 이용

2. <head>에서 <style>태그이용

3. css파일을 만든 후, html파일에 링크(link:css + Enter)

CSS선택자

캐스캐이딩

선택자 우선순위 계산 (specificity 계산)

💻출력

CSS 선택자

박스모델

✍실습

💻출력

Float레이아웃

내비게이션 메뉴

내비게이션 CSS

Website Title

CSS - 02

0개의 댓글

2. `<head>`에서 `<style>`태그이용

3. css파일을 만든 후, html파일에 링크(`link:css` + `Enter`)