« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

[45일차]CSS의 기본문법과 각종활용

CSS를 활용하여 내 프로젝트 페이지를 좀더 윤택하게 만들어보자

CSS의 기본문법

내코드

<!doctype html>
<html>
<head>
    <title>My Report for Web - Home</title>
    <meta charset="utf-8">
    <style>
        a {
            color:black;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h1>My Report for Web</h1>
    <ul>
        <li><a href="Home.html">홈</a></li>
        <li><a href="How_to_use.html">사용법</a></li>
        <li><a href="Report.html">레포트</a></li>
        <li><a href="Friends.html">친구</a></li>
        <li><a href="chatting.html">채팅</a></li>
    </ul>
    
    <h3>login form 구현예정</h3>

</body>
</html>

추가된것은 헤드쪽에

    <style>
        a {
            color:black;
            text-decoration: none;
        }
    </style>

나는 문법이라고 하면 코드의 생김새라고 하고싶다.

앞서 c를 배울때도 각 문법마다 활용하는 태가 다르다.

css의 생김새는

원하는태그 말해주고 중괄호안에 그 태그에대한걸 입력하는거라 이해했다 대충 ㅎ

꼴도 보기싫었던 링크의 밑줄과 색이 사라지는 정말 감격적인 순간이다.

CSS 박스모델

앞서말했듯 내가 원하는 내 프로젝트의 형태는 이거다

나머지 기능이 추가되고 삭제될 수도있다.

일단 제목인 My Report For Web의 크기를 키우고 싶다.

font-size:45px;

h1 {
            font-size:45px;
            
        }

제목의 위치는 가운데가 좋겠다.

text-align: center;

h1 {
            font-size:45px;
            text-align: center;
            
        }

경계선은 아레쪽만 ,

선의 굵기는 1px정도, 색은 초록색

border-bottom:1px solid green;

h1 {
            font-size:45px;
            text-align: center;
            border-bottom:1px solid green;

        }

그리고 박스의 여백을 다양하게 조정할 수 있는문에 대해서 배웠다.

margin, padding

브라우저에다가

우클릭한후 검사버튼을 누르면 내가 확인하고 싶은 박스의 패딩과 마진을 알 수 있다.

h1 {
            font-size:45px;
            text-align: center;
            border-bottom:1px solid green;
            margin:0px;
            padding:30px;
        }

마진은 0으로 하고 패딩을 좀 입혀줬다

추워보여서 ㅎㅎ

굳!

한결 이뻐졌다. 물론 아직 불만은 있다.

메뉴탭에다가도 구분선을 넣고싶다.

border-right:1px solid green;

ul {
            border-right: green;
        }

메뉴를 책임지고 있는 태그는 ul이다

구분선굵기1px짜리와 역시나 초록색을 넣어줬다.

width: 100px;

ul {
            border-right:1px solid green;
            width: 100px;
        }

넓이는 100픽셀만으로 정했다

이역시도 마진을 0과 적당한 패딩을 입혀주자

굳 이쁘다

CSS 그리드

caniuse에서 지금배우는게 어떻게 쓰이는지 확인할 수 있다.

<div></div>

div를 활용해서 구획을 나눌수있다

디비젼의 약자가 아닐까나..

<body>
    
        <h1>My Report for Web</h1>
    <div id="grid">
        <div>
        <ul>
            <li><a href="Home.html">홈</a></li>
            <li><a href="How_to_use.html">사용법</a></li>
            <li><a href="Report.html">레포트</a></li>
            <li><a href="Friends.html">친구</a></li>
            <li><a href="chatting.html">채팅</a></li>
        </ul>
        </div>
        <div>
        <h3>login form 구현예정</h3>
        </div>
    </div>
</body>

바디쪽을 부모태그 자식태그 두개로 나눠줬다 .

c에서 함수만들 때 괄호사이에 쉼표하나 놔둬서 활용하려는것과 비슷한거같다.

메뉴구획과 내용구획을나누고 그거를 총괄하는 구획의 아이디를 grid라고 정했다.

grid-template-columns: 150px 1fr;

#grid{
            display: grid;
            grid-template-columns: 150px 1fr;
        }

grid라고 정한 아이디의 태그를 불러오고

보여줄 설정을 말해주고

그리드 템플릿 칼럼으로 첫번째구획은 150px 두번째구획은 1fr

what is fr?

만약 4fr 1fr이다 하면

5등분으로 가로든 세로든 나눠서 (column은 가로임)

4:1씩 공간을 나눠갖는다

WOW!

본문또한 구획을 나눠주고 그구획의 패딩을 설정해서 왼쪽칸과 거리를조금만두자.

메뉴칸에도

<!doctype html>
<html>
<head>
    <title>My Report for Web - Home</title>
    <meta charset="utf-8">
    <style>
        a {
            color:black;
            text-decoration: none;
        }
        h1 {
            font-size:45px;
            text-align: center;
            border-bottom:1px solid green;
            margin:0px;
            padding:30px;
        }
        ul {
            border-right:1px solid green;
            width: 100px;
            margin:0px;
            padding:20px;
        }
        #grid{
            display: grid;
            grid-template-columns: 150px 1fr;
        }
        #grid ul{
            padding-left: 25px;
        }
        #grid #article{
            padding-left: 20px;
        }
    </style>
</head>

<body>
    
        <h1>My Report for Web</h1>
    <div id="grid">
        <div>
        <ul>
            <li><a href="Home.html">홈</a></li>
            <li><a href="How_to_use.html">사용법</a></li>
            <li><a href="Report.html">레포트</a></li>
            <li><a href="Friends.html">친구</a></li>
            <li><a href="chatting.html">채팅</a></li>
        </ul>
        </div>
        <div>
            <div id="article">
                <h3>login form 구현예정</h3>
            </div>
        </div>
    </div>
</body>
</html>

본문의 구획을 한번더 나누고 article이라고 태그명을 정해줬다.

css를 활용해서 태그를 부를때 앞에 소속을 붙여줬다.

css를 활용하여 디자인을 어느정도 윤택하게 바꿔봤다.

그런데

이 많은 css문을 싹다 복붙하려니까 한숨부터나온다.

재활용하기

우선 같은 디렉토리에 style.css파일을 만들어준다.

그리고 태그를 뺀 css코드만 그곳에 복사 붙여넣기 해준다.

위와같이 해주자.

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

<!doctype html>
<html>
<head>
    <title>My Report for Web - Home</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    
        <h1>My Report for Web</h1>
    <div id="grid">
        <div>
        <ul>
            <li><a href="Home.html">홈</a></li>
            <li><a href="How_to_use.html">사용법</a></li>
            <li><a href="Report.html">레포트</a></li>
            <li><a href="Friends.html">친구</a></li>
            <li><a href="chatting.html">채팅</a></li>
        </ul>
        </div>
        <div>
            <div id="article">
                <h3>login form 구현예정</h3>
            </div>
        </div>
    </div>
</body>
</html>

위와같이 style.css로 저장되어있는 stylesheet를 불러와준다는 link태그를 건다.

그럼 하나씩 복붙안해주고

구획지정만 따로해주면된다.

솔직히 그거도 귀찮긴하다만 재밌긴하다.

컴퓨터를 공부하고자 마음먹은지 N일차

컴퓨터를 공부하고자 마음먹은지 N일차