CSS와 로그인 페이지 UI 제작과정

CSS란?

CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 랜더링할 것인지를 정의하기 위한 언어.

CSS는 HTML에 종속적이며 단독으로는 큰 의미를 갖지 못한다. 즉, 함께 쓰여야 제대로된 시너지가 나온다.

 

---

CSS 선언 방식

• 인라인 방식
• 내장 방식
• 링크 방식
• @import 방

인라인 방식 : HTML문서 요소에서 스타일 속성을 사용하여 직접 스타일을 작성하는 방식이다.

<p style:"width:100px; color:grey">

 

내장 방식 : <style> 내부에 작성하는 방식이다.

<style type="text/css">
	.logo {color: #eeeeee;}
</style>

 

링크 방식 : <link>를 사용하여 외부 문서로 css를 불러와 적용하는 방식이다.

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

 

@import 방식 : @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식이다.

<style type="text/css"> 
   @import url(style.css); 
</style>

---

마진(Margin), 보더(Border), 패딩(Pading)

출처 : https://tcpschool.com/css/css_boxmodel_margins

Margin의 속성에는 왼쪽(left), 오른쪽(Right), 아래(Bottom), 위(Top)이 존재한다

 

마진 vs 보더 vs 패딩의 차이

Margin - 요소 밖의 공간을 띄우는 역할. 투명해서 배경색 지정이 불가능하다. 음수값이 가능하다(객체를 겹치기도 가능하다는 것)

Border - 요소 안쪽의 공간으로 콘텐츠 주변 여백을 확보, 배경색과 이미지는 모두 padding의 영역이다. 음수값이 불가능

Padding - 선으로 형성되어 있음. 시각적으로 구분할 때 사용한다.

 

다음은 내용을 직접 코드화하고 시각화한 내용이다.

여기서 Padding은 사실 선으로 형성이 되어있는데 시각화하기 위해서 범위를 많이 넓혔다. 의미적으로 색이 들어가는구나 생각해주길 바람

결과

CSS

HTML

Padding 구역은 노란색, content의 영역은 검정색이며 Margin의 영역은 투명해서 보이지 않는다.

그리고 여기서 Border는 검정색과 노란색의 사이의 선이라고 생각하면 된다.

(이해를 위해서 작성했지만 사실 노란색영역의 제일 밖의 부분도 Border이다)

---

다음으로는 코드간에 절대위치에서 코딩간에 막혔었다.

해결법은 다음과 같다.

절대위치 CSS

로그인 페이지

절대위치가 적용된 위치

일단 나는 왼쪽아래의 사진과 중앙에 위치한 사진의 중간에 꼭 저 사진을 넣고 싶었다.

처음에는 Margin을 이용하여 어찌저찌 넣었지만 윈도우창의 크기가 변경될 때마다 마음대로 움직였고, 이를 해결해야했다.

 

position : absolute;  ------> 해당 객체의 위치를 절대위치 즉, x와 y값으로 받겠다 라는 의미이다. 

transform : translate(-50%); ------> 사실 잘못 입력된 코드이다. 정석으로는 transform : translate(-50%,-50%);가 맞고 이는 정 중앙에 배치하겠다는 뜻이고, 명확하게는 translate(X,Y) 요소를 이동 시키는 속성.  

 

 

다음 목표

1. 실제 로그인 데이터를 입력받아 서버에 저장하라.(SQL일수도 있음)

2. 메인 화면을 작성하자.(주제 : 나라는 개발자는 이런 사람이에요!)

3. 자바 스크립트를 이용하여 애니메이션과 navigation을 제작해보자