What is HTML/CSS ?

1. HTML

간단하게 말해서 자료의 구조를 나타내는 언어.

ex) h1 태그로 감싼 부분은 머리말이고요~ p 태그로 감싼 부분은 본문이에요~ div 태그로 감싼부분은 박스입니다~

2. CSS

스타일 보관파일입니다. 한 파일에 HTML,CSS,JS를 같이 쓰는 것은 코드의 복잡성때문에 추천하지 않습니다.

웹 개발을 친숙하게 만드는 Tip
HTML/CSS는 코딩을 하는 것이 아니라 Word나 한컴처럼 문서를 만드는 작업이라고 생각하자.

So Why HTML/CSS ?

Word나 한컴으로 만든 문서는 다른 컴퓨터 언어와 콜라보레이션하기가 어렵다. 하지만 HTML/CSS는 python,ruby 등 개발언어와 콜라보레이션하면 더욱 빛을 발한다.

오늘 만들어볼 so simple한 개발자 이력서 양식이다.

어떤 레이아웃을 만들기 위해서는 우선 네모박스부터 치면서 생각해보자. 개발자 도구를 열어 어떻게 구성되어있는지 확인해보자.

이제 그러면 개발자 에디터 "VS CODE"를 실행하여 코딩..아니 문서를 만들어 보자.

Index.html 파일을 생성한 후, 기본적인 HTML에 꼭 들어가야하는 구조이다. 이건 그냥 외워서 사용하도록 한다.

하지만 vs extension 기능을 이용하면 ! 하나만 치고 Tab키를 눌러 기본적인 세팅을 완료할 수 있다.

1. HTML

1-1. HTML구조

전체 문서를 큰 container class에 담아둔다고 생각하고 시작하였다.
div 태그에 title 클래스 작명해주고 그 안에 h1 태그로 머릿말과 p 태그로 직업설명을 감쌌다.

<div class="container">
        <div class="title">
            <h1 class="name">스마일양배추</h1>
            <p class="job">IT Developer</p>
        </div>
        <div class="main-1">
            <h2 class="main-title">ABOUT ME</h2>
            <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Lorem ipsum Ducimus, Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam neque
                praesentium distinctio saepe impedit quidem aspernatur, laborum sequi deserunt repellendus, repudiandae
                illo facilis quis voluptatum perspiciatis voluptates cupiditate non rerum? voluptatem! In iure aut
                excepturi debitis, tenetur, rerum perspiciatis reiciendis sapiente facilis praesentium eveniet inventore
                est numquam necessitatibus soluta placeat dolor?</p>
        </div>

📌 오늘 사용할 HTML 태그

<h1></h1> 머릿말
<p></p> 글
<a href="하이퍼링크경로"></a> 하이퍼링크
<div></div> 구역나누기(박스)
<img src="이미지경로"> 이미지

HTML 태그는 150개 정도 된다고 하지만 중요한 태그 몇가지만 알아도 충분히 웹 개발을 할 수 있다. 개발하다가 모르는 태그가 나오거나 알고싶다면 바로 구글에 물어보면 된다.

1-2. HTML 구조

EXPERIENCE 아래로 구조는 비슷한 구조를 띄고 있어서 한 section만 만들고 복사&붙여넣기를 사용하면 된다.

📌 div 태그로 구역 나눌 때 주의사항

앞서 div 태그 안에 div 태그가 들어갈 수 있다고 했다. 헌데 구역을 나누기 위해서 div 태그만 사용한다면 얼마나 눈이 아플까 생각해본 적이 있나?

<div>
<div>
  <div>
    안녕하세요
  </div>
  <div>
    이건 어떠신가!
  </div>
</div>
<div>
  <div>
    반갑습니다
  </div>
  <div>
    이제 좀 헷갈리지?
  </div>
</div>
</div>

위와 같이 div태그로만 구역을 나누면 어떤 div가 어디 div까지 감싸고 있는지 파악하기가 쉽지않다.

<section>
            <article>
                <h2 class="main-title">EXPERIENCE</h2>
                <div class="float-wrap">
                    <h1 class="title-text">Awesome Programming Company</h1>
                    <h1 class="title-year">2020 - Now</h1>
                </div>
                <p class="main-text">Front-End Web Developer</p>
                <p class="sub-text">HTML/CSS,JS,Vue,React ...</p>

                <div class="float-wrap">
                    <h1 class="title-text">Ministry of Health</h1>
                    <h1 class="title-year">2017 - 2020</h1>
                </div>
                <p class="main-text">UI/UX Designer</p>
                <p class="sub-text">Web design</p>

                <div class="float-wrap">
                    <h1 class="title-text">Freelance Work</h1>
                    <h1 class="title-year">2015 - 2017</h1>
                </div>
                <p class="main-text">Graphic Designer</p>
                <p class="sub-text">Graphic Design,Editional Design</p>
            </article>
</section>

section,article 이라는 태그를 사용하여 구역을 나눠보자. div 태그만 사용할 때보다 한눈에 구조를 파악하기가 편리하다.

1-3. HTML 구조

sns 이미지를 클릭하면 해당 sns 사이트로 이동하는 기능을 개발해보자.

<div class="sns">
            <a href="http://facebook.com"><img class="sns-img" src="img/facebook.png"></a>
            <a href="http://instagram.com"><img class="sns-img" src="img/insta.png"></a>
            <a href="http://linked-in.com"><img class="sns-img" src="img/linked-in.png"></a>
            <a href="http://twitter.com"><img class="sns-img" src="img/twitter.png"></a>
        </div>

a태그 안에 img태그를 넣어서 이미지를 클릭하면 미리 지정해둔 사이트로 이동하도록 개발하였다.
img태그는 /img로 닫아주지 않는다.

1-4. HTML 구조

맨 마지막 부분은 footer라고 하는데, 주로 저작권이나 사업자등록증번호, 전화번호, 사업장 위치 등의 정보를 적어준다.

<div class="footer">
        <p>Copyright CODE LION All rights reserved.</p>
    </div>

2. CSS

2-1. CSS 기본 속성

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

* {
    font-family: 'Montserrat';
}
body,p,h1,h2 {
    margin: 0;
    padding: 0;
}

@import를 이용하여 폰트정보를 사이트에서 가져온다.
*{}는 문서전체에 적용한다는 의미이다.

📌 p태그와 h태그에는 기본 여백이 들어가 있어서

아예 margin(바깥여백),padding(내부여백)을 0값으로 지정해두 CSS 디자인을 시작하면 편리하다.

2-2. CSS 주요 속성

.title {
	margin: ; // 바깥여백
    margin-left:;
    margin-right:;
    margin-top:;
    margin-bottom:;
    
    padding: ; // 안쪽여백
    padding-left:;
    padding-right:;
    padding-top:;
    padding-bottom:;
    
    border:1px solid black; // 경계선
    border-top:;
    border-left:;
    border-bottom:;
    border-right:;
    
    font-size:; // 글씨크기
    font-weight:; // 글씨두께
    font-family:; // 폰트
    font-style:; // 폰트스타일(기울이기,밑줄 등)
    
    text-align: ; // 글자정렬
    
    box-shadow:x y blur spread color;
    // color에서 rgba(0,0,0,0.5) 마지막 0.5는 투명도로 0~1로 나타낼 수 있다.
}

📌 margin,padding,border 짚고 넘어가기

가운데 파란색 네모가 우리가 내용을 입력한 content 부분이다.
border를 주면 안쪽으로 content가 밀려간다.
padding을 줘도 안쪽으로 content가 밀려간다.

margin을 주면 바깥쪽으로 여백이 생긴다.

📌 글자정렬이 아닌 div 태그를 가운데 정렬하고 싶다면?

.box {
margin-left:auto;
margin-right:auto;

이유는 모른다. 그냥 외우자.

2-3. float

.box {
	float:left; // 요소를 붕~ 띄워서 왼쪽에 위치해주세요~
}

float속성은 요소를 붕 띄워서 왼쪽 혹은 오른쪽에 배치하는 기능이다.
하지만 붕 띄우는 속성 때문에 float 속성을 준 다음 태그들과 겹칠 수 있다.

겹치는 것을 방지하기 위해서는 아래의 두가지 방법이 있다.

<!-- 방법 1.-->
<div class="float-wrap">
  <h1 style="float:left;">왼쪽으로</h1>
  <p style="float:right">오른쪽으로</p>
</div>

.float-wrap {
	overflow:hidden;
}

하나는 float 속성을 감싸는 div 태그에다가 overflow:hidden; 을 주는 것이다. 이유는 모른다. 그래서 HTML/CSS가 어려운 가보다...

<!-- 방법 2.-->
<div>
  <h1 style="float:left;">왼쪽으로</h1>
  <p style="float:right">오른쪽으로</p>
</div>
<div style="clear:both;"></div>

다음은 float 속성을 다 줬으면 마지막에 div 태그에 CSS 속성 clear:both;를 해주면 된다.

오늘의 소감

2022년 2월 21일 월요일 😃
멋쟁이사자처럼 스타트업 2기 2회차 첫 발걸음을 내딛었다.

아직은 배운 부분이라서 수월하게 따라갈 수 있지만 앞으로 어려운 시련이 닥쳐도 끈기있게 3개월을 집중해보고 싶다.