[dg_ai_school] 웹프로그래밍 5

이채환·2021년 7월 2일
WebProgramming대구AI스쿨
0

webprogramming

목록 보기
5/51

1) 학습내용

HTML>

<!DOCTYPE html>
<html>
<head>
  
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="css/style.css">
  
</head>
<body>

</body>
</html>

CSS>

body {
	background-color: red;
}

.box-model {
	width: 200px;
    height: 200px;
    background-color: yellow;
    border: solid 10px red;
    
    margin-left: 100px;
    margin-top: 100px;
    padding-left: 100px;
    padding-top: 100px;
    
}

박스모델(레이아웃을 도와주는 옵션)

margin, border, padding, contents

  • 열린태그와 닫힌태그 안의 내용물 contents
	<div class="box-model">
    	Hellow World
    </div>
    ---> 헬로월드가 콘텐츠

  • 바디태그 기준에서는 div 자체가 콘텐츠, 헤드 기준에서는 meta 링크도 콘텐츠

  • 인터넷 브라우저 영역에서
    마우스 우 클릭 > 영역 > elements 눌러보면 HTML과 Styles를 볼 수 있음

  • 커맨드 + / , alt + / 주석처리 단축키

  • margin과 padding은 주체가 아니라 공백으로 움직인다

  • 사용자가 가능한 빠르게 웹 화면을 보여줄 수 있도록 용량을 줄이는 작업들이 필요하다

    Timing 페이즈를 가져오는 속도(코드를 간소화 하면 빨라짐, 이 부분에 집중)

Margin, css

HTML

		<div class="margin-one"></div>
        <div class="margin-two"></div>

CSS

.margin-one {
	width: 100px;
    height: 100px;
    background-color: yellow;
    
    margin-bottom: 100px;
}

.margin-two {

	width: 100px;
    height: 100px;
    background-color: blue;
    
    margin-bottom: 50px;
}
  • margin top과 bottom 중에서 공백 공유시 큰 값이 우선

부모 자식관계에서 발생하는 병합현상

HTML

<div class="margin-parent">
	div class"margin-child"></div>
</div>

CSS

.margin-parent {
	width: 300px;
    height: 300px;
    background-color: yellow;
}

.margin-child {
	width: 150px;
    height: 150px;
    back-ground-color: blue;
    
    margin-top: 100px;
}
  • 마진병합 현상을 실제로 맞닥드리면 어려웠다.
    (홈페이지는 설계도와 같음. 작은 구역안에 구역 또 구역 안에 구역 등등)

Position 속성

margin 태그 { 안에 position: absolute; 를 넣어주면 파란 박스만 움직임
---> 한쪽으로 딸려가는 문제 해결

HTML은 크게 block요소와 inline 요소로 구분된다

  • 블록은 공간과 줄바꿈, 줄바꿈 없이 나란히 정렬
  • HTML
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

CSS

h1 {
	display: inline-block; ---> 속성 변경
    
	width: 100px;
    height: 100px;
    background-color: yellow;
    
    margin-top: 100px;
}

span {
	display: block; ---> 속성 변경
    
	width: 100px;
    height: 100px;
    background-color: pink;
    
    margin-top: 100px;
}

  • h1태그도 태생적으로 값을 가지고 있음

  • block, inline를 서로 속성을 바꾸는 속성 display

display: inline; (block;)
  • 주의점) 인라인요소는 기본적으로 사이 공백을 가지고 있음

inline-block 영역

HTML

<sapn class="inline">Inline</span>
<sapn class="inline-block">Inline</span>
<img src="https://via.placeholder.com/200">

버티컬 언라인 속성은 inline요소에서만 사용가능
css

.inline-block {
	display: inline-block;
    
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • css에 추가(가장 큰 이미지를 중심으로 이미지가 정렬됨)
.inline, inline-block, img {
	vertical-align: top;
}
.inline, inline-block, img {
	vertical-align: bottom;
}
.inline, inline-block, img {
	vertical-align: middle;
}
  • img 태그는 x축 정렬이면서 공간에 대한 크기를 갖고 있음. 그래서 사용가능

레이아웃에서 position 개념 중요 (차원의 이해 필요)

  • 3차원 Z 축이 등장, 2차원처럼 같이 움직이지 않음(이미지의 레이어 개념)

  • 웹사이트는 2차원과 3차원이 섞여있다

  • 내가 선택한 영역을 2차원 또는 3차원으로 만들 속성값

3가지를 반드시 기억!!! (443 경우의 수)

**1. margin-top 사용시 부모 자식 지간에 발생하는 마진병합 현상이 일어나는가?

**2. top, right, bottom, left 속성을 사용할 수 있는가?

**3. 자신의 높이 값이 부모에게 영향을 주는가?

position-static 2차원

HTML

<div class="static-parent">
	<div class="static-child"></div>
</div>

CSS

.static-parent {
	width: 300px;
    height: 300px; ---> 제거하면 부모의 값은 자식의 높이 값이 부모에게 영향
    backgroud-color: yellow;
}

.static-child {
	position: static; ---> 제거시 속성이 달라짐

	width: 150px;
    height: 150px;
    backgroud-color: blue;
    
    margin-top: 100px; ---> 부모자신간 마진병합 현상 일어남
    top: 100px; ---> 아무런 움직임이 없음, 상하좌우 사용불가
}
  • 모든 html 코드는 기본적으로 2차원에서 시작

position-fixed 3차원

HTML

<div class="box1"></div>

<div class="fixed-parent">
	<div class="fixed-child></div>
</div>

<div class="box2"></div>

CSS

.static-parent {
	width: 300px;
    height: 300px; 
    backgroud-color: yellow;
}

.static-child {

	width: 150px;
    height: 150px;
    backgroud-color: blue;
    
    margin-top: 100px;

}

.box1 {
	width: 300px;
    height: 200px;
    background-color: gray;
}

.fixed-parent {
	width: 300px;
    height: 300px; ---> 제거시 자식의 높이값이 부모에게 영향 X
    background-color: yellow;
}

.fixed-child {
	position: fixed; ---> 추가(따라다니는 모든 배너광고들은 모두 fixed)

	width: 100px;
    height: 100px;
    background-color: blue;
    
    margin-top: 100px; ---> 부모자식간 마진병합현상 없음
    top: 100px; ---> 최초위치가 기준이 아님, 브라우저 왼쪽 상단을 기준으로 움직임
    left: 100px; ---> 마찬가지
}

.box2 {
	width: 300px;
    height: 200px;
    background-color: green;
}
  • 부모자식 지간 속성 X
  • 상하좌우 사용가능
  • 부모에게 영향을 미칠 수 없음

relative 2차원+3차원 복합적

HTML

<div class="box1"></div>

<div class="relative-parent">
	<div class="relative-child></div>
</div>

CSS

.box1 {
	width: 300px;
    height: 200px;
    background-color: gray;
}

.relative-parent {
	width: 300px;
    height: 300px; ---> 높이제거시 자식의 값이 부모에게 영향
    background-color: yellow;
}

.relative-child {
	position: relative; ---> 

	width: 100px;
    height: 100px;
    background-color: blue;
    
    margin-top: 100px; ---> 부모자식간 마진병합현상
    top: 100px; ---> 최초 있었던 위치 기준으로 움직임, 자신이 주체가 되어 움직임
    
 }

Absolute 3차원 특징

HTML

<div class="box1"></div>

<div class="absolute-parent">
	<div class="absolute-child></div>
</div>

CSS

.box1 {
	width: 300px;
    height: 200px;
    background-color: gray;
}

.absolute-parent {
	width: 300px;
    height: 300px; ---> 부모에게 영향을 줄 수 없음
    background-color: yellow;
}

.absolute-child {
	position: absolute; ---> 

	width: 100px;
    height: 100px;
    background-color: blue;
    
    margin-top: 100px; ---> 마진병합 현상 x
    top: 100px; ---> 상하좌우 가능, 브라우저 기준으로 움직임
 }

  • 부모가 어떤 상태인지에 따라 좌표기준점이 달라진다(부모기준으로 기준점이 형성된다)

2) 어려운점

  • CSS의 디테일한 점이 많아 익숙하지 않음

  • 단축키 팁이 생각보다 많은 것 같음

  • Margin에 공백을 넣는 개념의 이해가 잘 안되었음, 포지셔닝에서 헷갈리기 시작함

3) 해결방법

  • 익숙해 지도록 복습함(복습하고 익숙해지는 것 말고 달리 방법이 없음)

  • 단축키를 따로 찾아봄

  • 실습을 해보면서 공백 개념을 이해함(주제적으로 움직이는 것이 아니라 다른 것에 의해 움직인다), 포지셔닝도 마찬가지로 그려가며 이해해봄

4) 학습소감

  • 헷갈리지 않도록 폴더구별, 문서구조 만드는 것의 중요성을 다시 한 번 확인함

  • 우리가 매일 보는 랜딩페이지의 구조를 뜯어보게 됨.

  • 홈페이지를 하나의 집을 짓는 것으로 이해함. 구조를 어떻게 짜느냐의 중요성에 대해 생각해봄.

profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 4

다음 포스트

[dg_ai_school] 웹프로그래밍 6

0개의 댓글