SEED_Week_1_Web_study

신태원·2020년 8월 11일

Web_study

목록 보기

1/2

개인 기술 개발 블로그의 중요성이 대두되면서 조금 늦지 않은 감이 없지않아 있지만, 지금부터라도 배우는 내용을 차근차근 정리해볼까 한다.
개인적인 성격때문에 너무 깔끔하고 완벽한 정리는 불가할 것이다.

우선 내가 회장으로 있는 동아리 SEED에서 웹 개발 스터디를 저번주부터 시작했기 때문에, Html과 css의 기본적인 내용에 대해 정리하겠다.

우선 html이란 Hyper Text Markup Language 로써 웹 페이지를 만드는 언어라고 생각하면 편할 것이다. CSS는 그런 html을 좀 더 이쁘게(?) 만들어주는 역할을 한다.
거두절미하고 바로 Html의 문법적인 측면으로 넘어가자면, HTML의 문법은 대부분 태그의 사용으로 이루어지는데, 태그의 종류는 정말 많지만 현재 내가 배운 중요한, 기본적인 태그들은 다음과 같다.

HTML 문법

<h1>Hello World</h1>

Hello World

h태그들은 h1부터 h6까지 있으며 넘버가 높아질수록 크기가 작아진다. 실무에서는 h 태그보다 div 태그가 훨씬 많이 쓰임.

<h3>Hello World </br> Nice meet you </h3>

Hello World
Nice meet you

br 태그는 개행, 즉 줄바꿈 역할을 해주는 태그이다.

<p>Hello World </p>
<p>Nice meet you</p>

Hello World

Nice meet you

p 태그는 하나의 '문단'을 만들어주는 태그이다. 꽤 자주 쓰이는 걸로 알고 있음.

<a href="http://www.google.com" target="_self">구글 홈페이지 바로가기</a></p>

구글 홈페이지 바로가기

a태그는 링크와 관련된 태그인데, href 부분에 이동하고자 하는 링크를 적고, <a> 와 </a> 사이에 표시되고 싶은 텍스트를 적는다. 만약 링크를 클릭하고, 웹 페이지를 열 때, 기존의 페이지에서 이동하고 싶으면 target 부분에 _self를 넣어주고, 새로운 페이지를 열고 싶으면 target부분에 _blank를 넣어주면 된다.

<img src="http://kor.theasian.asia/wp-content/uploads/2018/08/GD.jpg" alt="피마원" width="300">

img 태그는 말 그대로 img와 관련된 태그이며, src부분에 현재 파일이 있는 위치를 적어주고, alt 부분에는 표시되는 img의 이름을 적어준다. width, height, border 등으로 사이즈를 조절할 수 있는데, CSS에서도 조절할 수 있으니 생략.

이름 : <input type="text" name="uname" />

이름 :

input 태그는 정말 중요한 태그인데, 서버쪽과도 연관이 있어서 JavaScript 부분 때 더 자세히 다루겠다.

CSS 문법

위에서도 말했듯이 CSS는 HTML을 이쁘게(?) 꾸며 주기위해 존재한다. 기본적으로 html의 <head> 태그 안에 <style>태그로 선언해 사용한다. 내가 느끼기에 가장 중요한 CSS는 레이아웃 관련 속성인데, 기초적인 속성은 다음과 같다.

<레이아웃 관련 속성>
•border : 박스의 선의 굵기, 색상 등을 지정해줌 ( div 태그 에서 주로 사용 )
•width : 박스의 너비를 설정해줌 ( px 단위를 주로 사용 )
•height : 박스의 높이를 설정해줌 ( px 단위를 주로 사용 )
•margin : 박스의 바깥쪽 부분의 여백을 설정해줌 ( px 단위를 주로 사용 )
•padding : 박스의 안쪽 부분의 여백을 설정해줌 ( px 단위를 주로 사용 )
•text-align : 박스 안쪽 내용물을 정렬 해줌 ( 왼쪽, 가운데, 오른쪽 정렬 )
*기택이 문서 참고( 바로가기 )

1주차 실습을 해본 결과, div로 우선 레이아웃을 대략적으로 구성을 하고, 하나씩 살을 붙히는 방식으로 해야 편하다는 것을 알았다.

위의 레이아웃을 그대로 만드는게 1주차 실습이었는데, 우선 div로 부모 블럭들을 만들고, 그 부모 div안에 자식 div들을 만들어줌으로써 두개로 쪼개나가면 완성이 된다. 내가 만든 레이아웃은 다음과 같다.

. 레이아웃

코드는 다음과 같다. 처음이라 매우 난잡하고 불필요한 코드들이 많음으로 주의 바란다.

Document

        /* 첫번째 크기, 두번째  */
        width: 300px;
        height: 500px;

        display: flex;
        flex-direction: column;
    }
    #div_1{
       
        
        background-color: red;
        display: flex;
        flex-direction: row;

        flex-grow: 1;
        
    }
    #div_2{
      
        
        background-color:yellow;
        flex-grow: 1;
        
    }
    #div_3{
      
        
        background-color:red;
        flex-direction: column;

        display: flex;
        flex-grow: 1;
        
    }
    #div_4{
        
        
        background-color:black;
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        
    }
    #div_5{
        
        
        background-color:purple;
        display: flex;
        flex-direction: row;
        flex-grow: 1;

    }
    #div_6{
        
        background-color:gray;
        display: flex;
        flex-grow: 1;

    }
</style>

        </div>
        <div id ="div_4">
            <div id ="div_5">
                <img src="" alt="">
            </div>
            <div id ="div_6">

            </div>
        </div>
    </div>
    <div id="div_2">
        <p>자식2</p>
    </div>
</div>