'웹피이제작(html,css,js)' 카테고리의 글 목록

웹피이제작(html,css,js)

2. CSS를 이용한 기초 홈페이지 꾸미기 2021.03.02
1. html를 이용한 기초 홈페이지 제작 2021.03.02

2. CSS를 이용한 기초 홈페이지 꾸미기

2021. 3. 2. 20:39

728x90

CSS란?

css란 cascading style sheets로 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트이다.

CSS를 이용한 꾸미기

html,css,js는 많은 방법으로 코드를 짜고 실행할 수 있다.

앞서 1강에서 설명했듯이 메모장을 이용해도 되고 비쥬얼스튜디오코드를 이용해도 된다.

또한, 웹에서 코딩이 가능한 클라우드 통합 개발환경을 이용해 코드를 짤 수 있다.

필자는 클라우드 통합 개발 환경을 이용해 진행했다.

이런 식으로 기본적인 코드가 쳐져있으며 오른쪽 상단에 보는 Open Preview를 통해 미리볼 수도 있다.

또한, 왼쪽에 style.css가 있는데 이를 통해 글의 스타일을 바꿔보도록 하겠다.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			Hello World
		</div>
        <div>
            Hello World2            
        </div>
        <div>            
            Hello World3
        </div>
	</body>
</html>

이런 식으로 같은 크기가 출력되는데 글자의 크기를 바꾸기 위해서는 font-size를 이용해 바꾼다.

<style을 바로 삽입>

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div style= "font-size: 2rem">
		Hello World
	    </div>
            <div style= "font-size: 3rem">
                Hello World2            
            </div>
            <div style= "font-size: 4rem">            
                Hello World3
            </div>
	</body>
</html>

이렇게 style을 바로 적어 글자의 크기를 바꿀 수 있다. 하지만 font-size만 바꾼다면 짧지만 color,center등 많은 것들을 추가하게 되면 코드가 지저분해질 수 있다. 이는 style.css와 class를 이용하면 해결이 가능하다.

<Class를 이용해 수정>

<html>

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div class="ex1">
		Hello World
	    </div>
            <div class="ex2">
                Hello World2            
            </div>
            <div class="ex3">            
                Hello World3
            </div>
	</body>
</html>

<css>

.ex1{
    font-size: 2rem;
}
.ex2{
    font-size: 3rem;
}
.ex3{
    font-size: 4rem;
}

각 div에 class를 넣어주고 css에 font-size를 추가에 원하는 크기를 넣어주면 좀 더 깔끔하게 바꿀 수 있다.

.ex1{
    font-size: 2rem;
    text-align: center;
}
.ex2{
    font-size: 3rem;
}
.ex3{
    font-size: 4rem;
}

또한, 이런 식으로 text-align: center를 이용하면 아래 보는 거와 같이 글의 위치를 바꿀 수도 있다.

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
        <div class= "ex">            
	    <div class="ex1">
		Hello World
	    </div>
            <div class="ex2">
                Hello World2            
            </div>
            <div class="ex3">            
                Hello World3
            </div>
            
        </div>
	</body>
</html>

.ex1{
    font-size: 2rem;
}
.ex2{
    font-size: 3rem;
}
.ex3{
    font-size: 4rem;
}
.ex{
    text-align: center;
}

이런 식으로 각각의 div태그를 다른 div태그로 전체를 감싼 후 전체를 힌 번에 변경할 수도 있다.

최종 결과물 사이트 - (빅데이터로 분석한 노래 추천)

datauzu.net/

빅데이터로 추천하는 노래

목소리로 때리는 음색 깡패 해외에 온 거만 같은 팝송 지금 당장 떠나고 싶은 여행 두근두근 썸 게임 실력 상승

datauzu.net

저작자표시 비영리 변경금지

'웹피이제작(html,css,js)' 카테고리의 다른 글

1. html를 이용한 기초 홈페이지 제작 (0)	2021.03.02

1. html를 이용한 기초 홈페이지 제작

2021. 3. 2. 15:26

728x90

HTML이란?

HTML이란 Hypertext Markup Language로 웹 문서를 제작하는데 있어 기본적인 웹 언어이다.

기초 홈페이지 제작

<html>
	<head>		
	</head>
	<body>		
	</body>
</html>

기본적으로 html은 이러한 태그 형식을 가지고 있다.

이때 <head> </head>이 부분의 경우 홈페이지에 정보를 나타내기도 하며 나중에 구글,네이버 검색에 필요한 정보를 이 부분에 저장하기도 한다.

<body> </body>의 경우 html에 몸체에 해당한다고 보면된다. 대부분의 태그를 body 태그 안에 위치되어 있으며 이를 통해 웹 사이트를 구성 해준다.

<html>
	<head>
		<title>homepage</title>
	</head>
	<body>
		Hello World
	</body>
</html>

이런식으로 원하는 문장을 적고 적은 코드를 웹 사이트로 바꿀려면 다양한 방법이 존재하는데 가장 간단한 방법은 컴퓨터에 깔려있는 메모장을 이용한 방법이다.

1) 메모장 적기

2) .html 저장

메모장에 코드를 적은 후 다른 이름으로 저장하는데 이때 .html을 붙여준다. 이러면 저장된 위치에 메모장이 아닌 웹 사이트를 볼 수 있다. 또한, 연결프로그램을 메모장으로 할 경우 코드 수정도 가능하다.

최종적으로 이러한 웹 사이트가 제작된 것을 볼 수 있다.

title태그에 있던 홈homepage가 위에 표시되어 있고 body태그 안에 있던 Hello World가 출력된 것을 볼 수 있다.