지난시간에 만든 페이지

 먼저 페이지의 글꼴을 수정해보자. https://fonts.google.com/?subset=korean 에서 마음에 드는 글꼴을 정하고, 정했으면 그림과 같이 따라한다.

해당부분을 html에 삽입
CSS 파일에 복사

글꼴은 페이지 전체에 적용할 것이기 떄문에, 페이지 부분인 <body> 적용한다.

/*글꼴 적용*/
body{
    font-family: 'Jua', sans-serif;
}
/* 외곽선 적용 login-box */

    outline-width: 2px;
    outline-color: #030303;
    outline-style: solid;

외곽선과 글꼴이 추가된 모습

 그리고 로그인 페이지의 영역을 확실히 하기 위해서 외곽선을 추가해 주었다. 이제 전체적인 모양은 정해 졌으니 내부요소를 수정하자. 먼저 각각의 요소들을 영역의 가운데 정렬을 하자.

/* 로그인 페이지 요소 가운데 정렬 */
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    justify-content: center;
    align-items: center;

가운데 정렬이 된 모습니다.

 이것으로 로그인 페이지 작성을 완료 하였다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

 지난 시간에 했던 상태에 이어서, 이번엔 로그인 박스 뒤편에 이미지를 추가해 볼 것이다. 이미지를 가져오는 것은 웹 페이지를 꾸밀 때 많이 활용한다. 

 일단 마음에 드는 이미지를 구해왔다. 고양이사진 

 이 이미지를 넣으려면 다음과 같은 css 코드가 필요하다.

background-image: url("https://cdn.ksilbo.co.kr/news/photo/202106/902252_501806_3356.png");

이미지 사용

  이미지를 사용했지만, 정상적으로 이미지가 표현 되는거 같지 않다. 이미지의 크기에 비해 보이는 부분이 적어보이기 때문이다. 이 것을 해결하기 위해서는 다음과 같은 코드가 필요하다

background-size: cover;

아기고양이가 전부 보여진다

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

08. CSS, 로그인 페이지 완성하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

단순한 로그인 페이지

 

<!-- HTML -->
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <link rel="stylesheet" type="text/css" href="../static/mycss.css">
</head>

<body>
    <div class="login-box">
        <h1>로그인 페이지</h1>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

 


 지금 만들어진 로그인 페이지는 너무나 단순하다. 일단 화면의 왼쪽 위에 위치하고 있기 때문에, 시각적으로 좋아 보이지 않는다. 먼저 로그인 페이지의 div 부분을 가운데로 옮긴다. 일단 가운데 정렬을 하기 위해서, 내가 사용하고 있는 로그인 창의 크기를 알기 위해서 background-color 키워드를 이용해서, 영역의 색을 칠해준다.

 

/* CSS */
.login-box {
    background-color: red;
}

background css를 적용시키면 다음과 같이 변한다.

이 상태를 보면, 현재 로그인 창의 가로길이는 화면 전체를 의미한다. 즉, 로그인 창의 크기를 조절할 필요가 있다. 

.login-box {
    background-color: red;

    width : 240px;
    height : 200px;
}

작아진 로그인 박스

 이제 로그인 박스를 가운데로 옮겨주자. 

균형있게 가운데로 움직였다.

  찾아보면 여러가지 방법으로 가운데 정렬하는 방법이 많은데, 여기서는 margin을 이용한 방법을 사용하였다.

    margin: auto;

 margin은 워드 프로세서의 들여쓰기 방식과 비슷하다고 생각한다. 현재 위치한 position 값에서 margin에 설정한 값만큼 이동 시켜주는 것이다. 여기서는 auto 키워드를 사용했는데, 이 auto 키워드는 가능한 많이를 표현해주는 것이고, margin은 기본적으로 4가지의 값을 가지는데, margin-left의 값과 margin-right의 값이 같아지는 지점이 가능한 많이 밀어주는 것이기 때문에, 중앙에 정렬이 되는 것이다.

 이제 단색의 배경을 제거해주면 중앙에 정렬된 로그인 페이지가 등장한다.

중앙에 정렬된 로그인 페이지

'HTML,CSS,JavaScript' 카테고리의 다른 글

08. CSS, 로그인 페이지 완성하기  (0) 2022.11.04
07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

먼저, 간단한 아래와 같은 HTML 파일을 준비했다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title> 나만의 로그인 페이지 </title>
</head>
<body>
    <h1> 로그인 페이지 </h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button> 로그인하기 </button>
</body>
</html>

위의 코드를 활용한 간단한 페이지

 이제부터 css를 활용해서 위 페이지를 꾸며 볼 것이다.

 

 가장먼저 프로젝트아래 templates 폴더와 static 폴더를 생성한뒤, html 파일은 templates 폴더에 넣어주고 css파일을 static 폴더 아래에 생성 해주었다.

간단한 폴더 구조

 이제부터 html 파일에, css 파일을 연결할 것이다. 아래의 코드를 활용하여 <title> </title> 태그 아래에 붙여 주었다.

<link rel="stylesheet" type="text/css" href = "../static/mycss.css">

 이제부터, html에서 구조를 만들면, css 파일에서 레이아웃과 디자인을 구현할 것이다. 이제부터 시작이다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03

 지난 시간까지 웹페이지를 만드는 뼈대, HTML에 대해 간략하게 알아 보았다. 그리고 이번 시간에는 CSS, 즉 웹페이지를 트랜디하게 바꿔주는 언어에 대해 알아볼 것 이다.

 먼저, CSS를 알기 전에 HTML의 구조에 대해 생각해 볼 필요가 있다. HTML의 태그는 부모-자식의 구조를 가지는데, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.

 

 

 HTML을 왼쪽과 같은 그림처럼 부모와 자식간의 관계를 가지는데, 자식 태그의 속성들은 부모 태그에 영향을 주지는 않지만, 부모 태그의 속성은 자식 태그에 영향을 준다. 

 즉, 부모 태그의 글씨 속성을 빨강으로 변경 하였다고 하면, 자식 태그1, 2가 모두 영향을 받는다. 반대로, 자식 태그 1의 글씨 속성이 빨강으로 변경된다고 부모 태그나 자식 태그 2에 영향을 주지 않는다.

 HTML의 특징을 이해하고, 이제부터 CSS를 사용하는 방법을 알아볼 것 이다. 

 

 

 

 CSS는 HTML의 <head> ~ </head> 안에 <style> ~ </style> 태그를 이용해 작성한다. <body> ~ </body> 안의 html 태그에 내가 편집할 각각의 요소에 class를 만들어, class 단위로 편집하는 것이 가장 큰 특징이다. 즉, 하나의 태그가 여러개의 class를 가질 수 있다. 

 이 특징을 이해하고 이제부터 CSS를 다루어 볼 것이다.

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03

본문을 꾸미는데 사용되는 다양한 태그들

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Hello, My Page </title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div> div : 구역 나누기 </div>
    <p> p : 문단 나누기 </p>
    <ul>
        <li> ul&li : 점으로 구분하기 1 </li>
        <li> ul&li : 점으로 구분하기 2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h4> hr : 줄 그어주는 태그입니다. </h4>
    <hr>
    span 태그 : 특정 영역 <span style="color:red">글자</span> 꾸미기
    <hr>
    a 태그 : <a href="http://naver.com/"> 네이버 </a>로 하이퍼 링크
    <hr>
    img 태그 : <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그 : <input type="text" />
    <hr>
    button 태그 : <button> 버튼 </button>
    <hr>
    textarea 태그 : <textarea> 입력 창 </textarea>
</body>

</html>

 이것들 말고도 다양한 태그들이 존재한다. 나머지는 차후에 사용할 일이 생기면 코멘트 형식으로 정리하겠다

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

앞선 시간에서는 HTML의 기본적인 토대만 마련한 웹 페이지를 만들었다. 이제는 본격적으로 내용을 추가 할 시간이다.

 

HTML에서 지원하는 다양한 속성의 태그가 있는데, 하나씩 써보면서 구조를 알아 볼 것이다.

 

<!DOCTYPE html>

<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> Hello, My Page!! </title>
</head>

<body>
	<h1> Hello, My Page!! </h1>
</body>
</html>

 앞선 시간에 설명하지 않은 태그가 있는데, 바로 <h1></h1> 태그이다. 이 태그는 본문에 삽입할 내용의 제목을 나타내는 태그인데, 이번 시간에 묶어서 알아보기위해 지난 시간에 설명을 하지 않았다.

 

 <h></h> 태그는 뒤에 숫자를 넣을때 마다 글자의 크기가 달라지는데 크기는 다음과 같다.

숫자가 커질수록 글자는 점점작아진다

<h1>~<h6> 태그는 줄바꿈을 삽입하지 않았는데 자동으로 줄바꿈이 된다는걸 기억하자.

 

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

 웹 개발을 하기 위해서 가장먼저 다루어야 할 언어인 HTML은 다양한 태그들이 존재한다. 이 태그들을 활용해서 웹 페이지의 구조를 작성할 수 있다.

<!DOCTYPE html>

<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title> Hello, My Page!! </title>
</head>

<body>
	<h1> Hello, My Page!! </h1>
</body>
</html>

 이 것은 간단한 웹페이지를 작성한 HTML 코드이다. 이 코드의 결과물은 다음과 같다. 

나의 첫 웹페이지. Hello, My Page!

  이 페이지에서 사용한 다양한 태그들이 있는데, 이 것들을 하나씩 알아볼 것이다.

 

 가장먼저 설명할 것은 HTML의 기본 속성들이다. 

- <!DOCTYPE html> : 마크업 언어용 DTD(Document Type Definition)태그이며, HTML5의 경우 맨 위에 존재하는 태그이다. 쉽게말해서, 이 문서는 html로 지정한다 라는 의미의 태그이다.

- <html> ~ </html> : 페이지의 전체를 담아주는 최상단의 태그이다. 모든 웹페이지는 html 태그를 가지고있다.

- <lang = "ko"> : 언어를 설정하는 태그이다. 현재 문서에서는 한국어로 설정되어 있다.

- <head> ~ </head> : 주로 페이지의 정보를 입력하는 공간이다. 

- <meta> : 메타 데이터를 입력하는 태그이다. 이 코드에서는 charset 속성이 사용 되었는데 HTML문자의 인코딩 방식을 UTF-8의 방식으로 사용하겠다는 의미이다.

- <title> ~ </title> : 해당 타이틀의 제목을 입력하는 태그이다.

- <body> ~ </body> : 페이지의 본문을 입력하는 공간이다. 이 곳에서 페이지의 구조, 즉 뼈대를 만든다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
00. HTML, CSS, 그리고 JavaScript  (0) 2022.11.03

+ Recent posts

티스토리툴바