웹기초 - CSS

학습내용

css는 html에서 디자인만을 위한 언어
html은 정보를 담고 css은 디자인을 담당한다

기본 문법

<html>
    <head>
        <style>
            li{
                color:red;
                text-decoration: underline;
            }
            .em{
                color: green;
            }
            #vip{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 class="em">CSS Cyntax</h1>
        <ol>
            <li class="em" id="vip">item</li>
            <li>item</li>
            <li>item</li>
           <!-- <font color="red">
                <li>item</li>
            </font>
            <li>item</li>
            <li>item</li> -->
        </ol>

    </body>
</html>

li{
	color:red;
	text-decoration: underline;
}

리스트에 '빨간색', '밑줄' 효과를 준다.

box model

<html>
<head>
    <style>
        h1{
            border: 10px solid red;
            padding: 30px;
            margin: 50px;
            width:100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <h1>WEB</h1>
    <h1>WEB</h1>
</body>
</html>

<style>
	h1{
		border: 10px solid red;
		padding: 30px;
		margin: 50px;
		width:100px;
		height: 100px;
	}
</style>

padding : 내부 여백
margin : 외부 여백

grid

<html>
    <head>
        <style>
            div{
                border: 10px solid skyblue;
                margin: 5px;
            }
        #container{
            display: grid;
            grid-template-columns: 100px 1fr 1fr;
        }
        </style>
    </head>

    <body>
        <div>HEADER</div>

        <div id="container">
            <div>LEFT</div>
            <div>CENTER</div>
            <div>RIGHT</div>
        </div>
        <div>BOTTON</div>
    </body>
</html>

div : 아무 의미 없는 CSS만을 위한 태그

  • css 선택자
    class 로 묶은 것끼리 같은 스타일 적용
    id 는 하나에만 적용
    tag < class < id 순으로 우선순위로 적용

반응형 디자인

<!doctype html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
    <style>
        @media all and (min-width: 600px){ 
            #container{
                display: grid;
                grid-template-columns: 180px 1fr;
            }
            body{
                background-color:yellow;
            }
        }
        @media all and (max-width: 600px) {
            body{
                background-color:red;
            }
        }
    </style>
</head>
<body>
    <h1><a href="index.html">html</a></h1>
    <div id="container">
        <ol>
            <li><a href="1.html">one</a></li>
            <li><a href="2.html">two</a></li>
            <li><a href="3.html">three</a></li>
        </ol>
        <div>
            <h2>Welcome</h2>
            Hello, WEB
        </div>
<   /div>
</body>
</html>

  • 화면 크기가 클 때

  • 화면 크기가 작을 때

학습후기

반응형 디자인 들어가면서 사용법이 약간 어려웠는데
수업이 끝난 후 복습하면서 여러가지 테스트를 해보며 작성해보니 어떻게 동작하는지 감이 잡혔다.
수업과정에서 뿐만 아니라 직접 만들어 시행착오를 겪는 것까지가 중요한 과정인 것 같다.

[1일차] 자바스크립트1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage