02 웹페이지 만들기_CSS

김성연·2021년 12월 20일
0

웹페이지 만들기

목록 보기
2/3

지난 html글에 이어서, 아니 영향을 주는 요소가 뭘까? 생각해본다면,

<부모태그>
	<자식태그>
    		응애, 나는 애기야 응애
    	<자식태그>
<부모태그>

"꾸미기..?"

라고 생각하면 센스만점(나도 생각했는데, 다른사람도 생각했을거야)

꾸미는것은 우리가 생각하는 그 꾸미기 그 자체이다.

배경,폰트, 간격, 사이즈 등

자식요소는 부모의 손바닥 안이고, 부모의 속성대로 요리된다 생각하면! 편_안.

그럼 어떻게 속성을 부여할까?

class=" " 을 이용한다.

<부모태그 class="parent">
	<자식태그>
    		응애, 나는 애기야 응애
    	<자식태그>
<부모태그>

이렇게만 적음 끝이냐고? 당연히 아니지, 01에서

지난 01 웹페이지 만들기_HTML 일부..
html은 크게 head와 body부분으로 나뉜다.
head태그는 페이지의 속성 정보를 갖고있다. 이곳에는 웹페이지의 제목, 설명, 사용할 파일위치
, css파일 같은, 웹페이지의 보이지 않는 정보를 작성한다.

css파일도, 속성도 head태그안에 작성한다. style태그를 이용해서 !

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            background-color: green;
        }
    </style>
</head>

형식은: .클래스이름 {}, { }안에 속성들을 작성하면된다. 그럼 속성들은 어떻게 작성할까?

궁금하면 찾아보자

진짜 이게 내가 필요한 것들만 알 수 있어서 좋고, 나중에 찾아볼 때 도움됨!!(절대 귀찮아서아님!!!)

근데, 저렇게 head부분에 계속 넣으면

나중에 style을 너무 많이 작성하면 너무 지저분하지않을까?

라고 생각하던 찰나, 번뜩 위에 css파일 같은, 파일..? 파일로 분리가 된다? 된다!

css파일을 현재 작성중인 html이 있는 폴더에 만들고, 경로를 추가해주면 됨 !

이렇게 작성해서

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

이렇게!

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href = "(css파일이름).css">
</head>

+) 적은 노력으로 있어보이게 만드는법:

폰트만 바꿔도 그 곳이 있어보이는 곳이 된다. 폰트도 꼭 바꾸자

어떻게?

검색하면 다 나온다^^ 찾아보고 내 입맛에 골라 잡는게 제일 좋아 ~

내 작품을 있어보이게 도움주는것들

구글폰트주소:https://fonts.google.com/?subset=korean
부트스트랩주소:https://getbootstrap.com/docs/5.0/components/buttons/

0개의 댓글