대학생 쩡딱구리

코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기 본문

STUDIES/WEB

코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기

쩡딱구리 2021. 2. 5. 20:20

2일차 후기를 쓰기 전 좋은 소식이 하나 생겼다. 바로바로...!

내가 코뮤니티 서포터즈에 합격했다!

코뮤니티 서포터즈 합격!

열심히 하겠습니다. 뽑아주셔서 감사드려요😊!

메일이 빨리 오기를 손꼽아 기다리는 중이다.

 

1. HTML의 기본 구조

 

코뮤니티 웹 기초 1일차: 웹 개발 시작하기

1. 웹 개발 시작하기(에디터 설치)  많고 많은 에디터가 있지만 수업에서는 Visual Studio Code를 다루고 있고 나 역시 코딩을 하면서 설치해둔 Visual Studio Code를 사용했다. Visual Studio Code가 편한 이유..

jjeongttakgoori.tistory.com

 어제 웹 개발, HTML의 기초를 배우면서 태그를 주로 다루었는데 그 내용과 오늘의 내용이 맞닿아 있다. HTML은 마크업 언어이기 때문에 모든 HTML은 태그로 구성되어 있다. 이때 태그는 중첩될 수 있다. 내가 작성한 어제 1일차 소스 코드를 보면, <html> 태그 안에 <head>와 <body> 태그가 있고, 또 그 안에 <title>, <p>, <img> 등등 다양한 태그가 중첩되어 있는 것을 알 수 있다.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>만나서 반갑습니다!</title>
</head>
<body>
    <h1>안녕하세요 여러분 정말 반갑습니다!</h1>
    <img src="C:\Users\s\Desktop\노트북다람이.jpg">
    <h2>저는 이번에 모각코 웹 기초 스터디에 합류한 김민정0110이라 합니다.</h2>
    <p>html이 처음이라 익숙치 않은데 깔끔하게 정리해주셔서 이렇게 나름 열심히!</p>
    <p>재미있게 하고 있습니다! 신청하길 정말 잘 한 것 같아요:)</p>
    <p>기회 주신 코뮤니티에 감사드립니다. 정말 열심히 할게요!</p>
    <p><i>오늘을 시작으로 15일! 잘 부탁드립니다:D</i></p>
</body>
</html>

 HTML은 마크업 언어이기 때문에 웬만하면 오류가 나지는 않지만, 제대로 된 문서를 만들고 검색까지 되게 만들기 위해서는 태그를 제대로 작성하는 것이 좋다고 한다. 중요한 태그만 다루어보고자 한다.

<! DOCTYPE html> HTML이 html5버전임을 알려줌
<html>~~~</html> 모든 HTML 문서는 <html> 태그로 감싸져 있음
<head>~~~</head> HTML의 메타 데이터를 모아놓는 부분
<body>~~~</body> 디자인 기능들을 갖고 있는 태그(<p>, <img>, <h1> 등)들을 넣는 부분

 

2. CSS

 CSS(Cascading Style Sheets)는 웹사이트에서 색상, 여백, 사이즈 등의 디자인을 담당하는 요소이다. 웹사이트 뼈대를 만드는 게 HTML이라면 웹사이트의 미모(?)를 만들어주는 것이 바로 CSS! CSS의 기본 구조는 아래와 같다.

h1 {
    color: red;
    background-color: #000000;
}
  • 선택자 h1: 중괄호({  }) 안의 디자인을 적용할 대상
  • 중괄호: 중괄호 안에 CSS 속성 작성, 꼭 짝을 맞춰주기!
  • 속성 이름 color, background-color
  • 속성값 red, #000000: 지정하고자 하는 속성의 값, 작성 후 세미콜론(;) 작성해주기!

CSS를 적용할 수 있는 곳은 아래와 같다.

HTML 태그

 HTML의 모든 태그가 선택자로 활용될 수는 있지만 모든 태그에 CSS를 적용하는 것은 번거롭고 비효율적이다.

 

class = "선택자"

 HTML의 태그 중 여는 태그에 class = "선택자 이름"을 적을 수 있다.

<div class = "divider">선택자에 class 이름 넣기</div>

 클래스 선택자를 사용할 때 클래스 이름 앞에 마침표(.)를 붙일 수 있다. 아래와 같이 코드를 작성했을 때 divider라는 이름을 가진 클래스를 가진 모든 html태그에 대해 중괄호 속 디자인을 적용하게 된다.

.divider {
  font-size = 10px;
  color: blue;
}

 

4. 미션

Day2.html
0.00MB

✅ HTML과 CSS를 적용해 나만의 위키백과 페이지 만들어보기!

 

<!DOCTYPE html>

<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Day2</title>
    <style>
        table, tr, td{
            border: 1px solid black;
            border-collapse: collapse;
            width = 100%;
        }
    </style>
</head>
<body>
    <div class="profile">
        <h3>Minjeong Kim0110</h3>
        <img src="C:\Users\s\Desktop\안녕다람이.png">
        <hr>
        <p> 김민정0110은 20대 초반의 대학생으로 현재 모각코 웹 기초 1기에서 HTML과 CSS를 공부하고 있다.</p>
        <p> 소프트웨어가 이중전공이지만 코딩을 어려워하는 것이 함정. <strong>그래도 모각코에서 나름 열심히 하고는 있다.</strong></p>
        <hr>
        <h3> 김민정0110에 대한 간단한 정보(TMI) </h3>
        <p> 김민정0110에 대해 아주 간단하게만 소개해본다. 사실 관심받는 거 좋아하지만 소심해서 이런 거 아주 좋아한다.</p>
        <table>
            <caption>기본 정보</caption>
            <tr>
                <th bgcolor="#D1B2FF"> 이름 </th>
                <td> 김민정0110 </td>
                <th bgcolor="#D1B2FF"> 직업 </th>
                <td> 대학생 </td>
            </tr>
            <tr>
                <th bgcolor="#D1B2FF"> 성별 </th>
                <td> 여성 </td>
                <th bgcolor="#D1B2FF"> MBTI </thbgcolor>
                <td> INTJ </td>
            </tr>
            <tr>
                <th bgcolor="#D1B2FF">SNS</th>
                <td colspan="3"><a href="https://jjeongttakgoori.tistory.com/">티스토리</a></td>
            </tr>
        </table>
        <hr>
        <h3>김민정0110 대외활동</h3>
        <ul class="text">
            <li>🐨 코알라 유니브 3기</li>
            <li>💙 한국대학생IT경영학회 22기 💚</li>
            <li><mark><strong>👩‍💻 모각코 웹 기초(공부 중)</strong></mark></li>
            <li>🦉 <i>HUFS Life Academy(활동 예정)</i></li>
            <li>기타: 빡공단, 수파자 체험단 등등등</li>
        </ul>
        <hr>
        <h3>김민정0110에 대해 더 알아보기</h3>
        <ul class="text">
            <li><a href="https://github.com/minjeong-kim-git">깃허브</a></li>
            <li><a href="https://www.instagram.com/what_potato_does/">대외활동 인스타그램</a></li>
        </ul>
    </div>
</body>
</html>

2일차 미션

CSS를 어디에 넣어볼까 고민하다가 나는 표의 색상을 넣어봤다! 내가 좋아하는 연보라색으로💜

 

5. 소감

 모각코의 매력은 어떤 걸 해주기보다 기본적 노하우를 정리해주고 미션을 스스로 찾아가면서 해내야 한다는 점 같다! 자신에게 공부가 되기도 하고 각자가 완성한 미션도 각자 개성이 다양해 보고 댓글다는 재미도 있다! 위키를 만들면서 고민도 많았지만 정말정말 재미있었다. 이렇게 각자 미션을 완성해나가면서 신선한 자극을 받는 것 같다. 늘 뿌듯함을 느끼고 있는 코뮤니티 서포터즈로 활동하게 된 것도 정말 행복하다🥰 여러분 다들 코뮤니티 하세요...!

 

코뮤니티 - 코딩은 독학이야, 모두... : 네이버 카페

코뮤니티 [코딩커뮤니티, 코딩공부, 코딩독학, 코딩과제] : 파이썬 python, C언어,C, C++, 자바 java

cafe.naver.com

 

'STUDIES > WEB' 카테고리의 다른 글

코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기  (0) 2021.02.16
코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법  (0) 2021.02.14
코뮤니티 모각코 웹 기초 3일차: CSS, 폰트 적용하기  (0) 2021.02.11
코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기  (0) 2021.02.04
코뮤니티 모각코 웹 기초 합격과 시작  (0) 2021.02.04
'STUDIES/WEB' Related Articles more