웹에서 활용하는 대표 이미지형식 3가지

required 속성

필수입력요소를 설정할때 required 속성을 지정하면 된다.
필수입력요소를 입력하지않고 submit버튼을 누르면 해당칸을 입력하라는 메세지가 출력되고 포커스까지 해준다.

아래예시를 보자.
정보를 제공받으시겠습까 radio버튼 아니요를 클릭하면 아래 소식을 어떻게받으시겠습니까는 아예 사라지게 하고싶다.

ITWILL학원 : 4강 WEB(HTML, CSS) BY 김영희

1. form태그안의 input태그

input type="" 의 종류는 엄청 많다.

그중에서 아래 코드를 가지고 몇가지 속성과 함께 예시를 알아보자.

1
2
3
4
5
6
7
8
9

<form action="test.jsp" method="POST">
	<label for="id">ID <input type="text" id="id" minlength="6"><br></label>
	<label for="pw">Password <input type="password" id="pw"><br></label>
	<label for="idNumber">Identification Number(without -)<input type="password" maxlength="13" size="20"><br></label>
	<textarea name="memo" id="" cols="50" rows="10"></textarea>
<hr>
<input type="submit" value="입력한대로 제출">
<input type="reset"> 
</form>

1. label for=””와input id=””는 꼭 일치시켜준다

2. input type=”password” maxlength=”13” size=”20”

   • type=”password”는 type=”text”랑 동일하나 외부에 암호화되어 보여진다.
   • maxlength=”13”속성으로 전화번호나 주민등록번호등 최대길이가 지정되어있는 정보들을 데이터 입력길이 지정해줄수있다.
   • size=”20” 는 input에 쓰여진 글자의 숫자를 새고 그만큼 size를 늘리는 방식이다.
   • size속성의 경우 한글 및 영문, 폰트크기에 따라서 size가 달라지기 때문에 width값이 정확하지 않기때문에 잘 사용하지않는다. 보통 css로 크기작업을 해준다

3. input type=”submit”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 제출 / 익스엑스 : 퀴리전송
   • 기본이름을 바꾸고싶으면 value=”입력한대로 제출” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

4. input type=”reset”

   • value속성을 적어주지 않으면 브라우저마다 기본 이름이 나온다
   • 기본이름 크롬 : 초기화 / 익스엣지 : 초기화
   • 기본이름을 바꾸고싶으면 value=”입력한 내용 초기화” 이렇게 바꿔주면 버튼안의 글자가 입력한 내용으로 바뀐다

5. 위의 input type="submit"와 input type="submit"은 form태그안에 위치해있을때 사용가능하다!

1
2
3
4
5
6
7
8

<h1>파일전송</h1>
<label for="ph">증명사진</label> <input type="file" value="너의파일" name="" id="ph">

<h1>검색어 삭제</h1>
<label for=""></label><input type="search" name="" id="" value="검색어삭제">

<h1>히든</h1> 숨은데이터전송
<label for=""></label> <input type="hidden" name="membership" id="" value="gold">

6. input type=”file”

   • 로컬 컴퓨터의 파일을 선택하는 기능을 하는 파일전송버튼을 생성한다.
   • 기본벨류값은 “파일전송”이고 value=”너의파일”이렇게 지정해줘도 보여지는 글이 바뀌지않는다.

7. input type=”search”

   • 검색창을 입력하는 기능은 하지 않고 입력된 검색어를 한꺼번에 삭제해주는 버튼을 만들어주는 기능을 한다. 유저에게 유용한 기능이다

8. input type=”hidden”

   • hidden타입은 문서상에 출력되지않는다. 그럼 어디다 쓸까? DB를 다룰때 주로 사용된다.

2. form태그안의 textarea태그

닫힘태그가 꼭 필요하다.
속성들도 꾸미기이기때문에 최근에는 속성을 사용하는대신 css에서 크기를 조작한다.

• 속성
  • cols=”” : 가로길이 ex)cols=”10” : 10줄이 들어가는 크기의 길이
  • rows=”” : 세로길이 ex)rows=”5” : 5열이 들어가는 크기의 길이

1

<textarea name="textarea" cols="50" rows="10"></textarea>

3. form태그안의 button태그

버튼태그의 타입에는 4가지 종류가 있다

1. type=”submit”
   type을 적지않아도 기본으로 적용되는 디폴트값이다

1
2

<button type>제출</button>
<button type="submit">제출</button>

2. type=”button”
   그냥 일반 버튼이다. 따라서 onclick=””으로 function이나 url을 연결할수있다.

1

<button type="button">그냥버튼</button>

3. type=”menu”
   타입을 메뉴라고 주게되면 minlength=””를 적용하였을때 안내메세지를 띄어주는 신통방통한 기능이다
   그런데 구글링해보니 많이 사용하지 않는 타입속성이었다.
   왜지?
   나는 좋은데… 아무튼 잘 사용하지 않는 속성인 것 같다.

1

<button type="menu">메뉴</button>

4. type=”reset”
   입력했던 값을 초기화시키는 버튼이다.

1

<button type="reset">리셋</button>

4. input="button"태그와 button태그의 차이점

input="button"태그와 button태그는 submit을 수행하기에 기능적으로 동일하다.
그렇다면 왜 나눠져있을까?

button태그를 사용하면
버튼안에 이미지를 함께 넣거나 버튼글자의 형태(굵기,기울기등)를 바꾸거나 웹아이콘을 넣는 등의 활용도가 높다.

참고링크 : web icon 사용방법

참고링크 : web icon 종류

따라서 요즘에는 input="button"보다는 button태그를 더 많이 사용한다.

참고링크 : input type=”submit” vs button 비교

5. 드롭다운리스트 Dropdown List

dropdown list는 항목이 많을때 선택할 수 있게끔 아래로 내려오는 목록형식으로 나타내는 태그이다.
공간절약형 객관식이다.

드롭다운 리스트를 이미지로 먼저 만나보자.

위의 4가지 형태를 어떻게 html 태그로 만들수있을까?

1. 기본형

1
2
3
4
5
6
7

<select name="과목" id="">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

기본적으로 적은 순서대로 출력된다
selected 속성 : checked 속성처럼 selected를 주면 HTML이 아닌 JSP를 먼저 출력할 수 있다.

2. multiple 적용

드롭다운리스트는 다중선택이 가능할까?

예스예스예스!

select태그에 multiple속성을 추가해주면 된다.
사용할때는 ctrl를 누르고 다중선택을 하면 표시가 된다.
선택된채로 출력되는 selected도 적용가능하다

1
2
3
4
5
6
7

<select name="과목" multiple>
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

3. size 적용

드롭다운리스트는 다중선택되진않지만 박스리스트형태로 출력하고싶다면?

속성 size="n"을 추가해주면 된다.
항목 n개가 보이는 상자형으로 출력된다.

1
2
3
4
5
6
7

<select name="과목" size="10">
	<option value="HTML">HTML</option>
	<option value="CSS">CSS</option>
	<option value="JSP" selected>JSP</option>
	<option value="JAVA">JAVA</option>
	<option value="직업기초">직업기초</option>
</select>

4. optgroup label=”” 적용

만약 optgroup마다 selected를 추가해주면 어떻게 될까?

selected가 다 출력되는 것이 아니라 selected속성이 들어간 제일 마지막(순서가 제일 아래인)태그 하나만 선택된채로 출력된다.

1
2
3
4
5
6
7
8
9
10
11

<select name="과목">
	<optgroup label="오전수업선택">
		<option value="HTML" selected>HTML</option>
		<option value="CSS">CSS</option>
	</optgroup>
	<optgroup label="오후수업선택">
		<option value="JSP" selected>JSP</option>
		<option value="JAVA">JAVA</option>
		<option value="직업기초">직업기초</option>
	</optgroup>
</select>

파이썬 인강 자기계발 챌린지 25회차 미션

1. 설명글 보이지 않게 스타일링

위의 이미지처럼 설명글을 보이지않게 처리하기위해서는 두가지방법이 있다.

1. display: none;

2. visibility: hidden;

1
2
3
4

.mailing-form > lable{
    display: none;
    visibility: hidden;
}

적용시키면 아래 이미지와 같이 설명글은 보이지않게 된다.

이렇게해도 설명글은 보이지 않지만, 스크린리더와 같이 보조기기를 사용하는 사용자들을 위해 웹접근성을 고려한 스타일링을 할 수 있다.

1
2
3
4
5
6
7
8

.mailing-form > lable {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden; /*크기에 넘치는 내용은 숨겨짐*/
    margin: -1px;/*음수마진 가능*/
    clip: rect(0,0,0,0);/*상하좌우를 자를 수 있음*/
}

• overflow : hidden;의 경우 안에 있는 데이터가 흘러넘치는 경우 과감하게 넘치는 내용을 숨겨버리는 역할을 한다.

• margin : -1px; 마진은 음수로도 줄 수 있다.

• clip : rect(0,0,0,0); 앞으로도 사용될지 안될지 잘 모르는 속성이긴 하지만 현재로선 스크린리더 지원에 가장 적합한 속성이다. 상하좌우를 숫자만큼 남기고 자를수있다. 현재 아예 안보이게 만들고싶으므로 모든 숫자를 0으로 설정했다.

2. 버튼태그를 input 태그안에 넣기

위에서 가져 온 이미지를 이번엔 input태그와 button태그에 초점을 맞추어 다시 한번 더 보자.

스타일링을 위해 버튼태그를 어떻게 하면 input태그안에 넣을 수 있을까?
position속성으로 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.input[type="email"]{
    width: 100%;
    border: 1px solid #44b78b;
    border-radius: 4px;
    height: 5rem;
}

.mailing-form-btn{
    position: absolute; /*input속성안에 위치해야하기때문에 그렇다면 기준은? mailing-form->mailing form에서 relative*/
    top: 0;
    right: 0;
}

.mailing-form{
    position: relative;
}

1. .input[type=”email”]{}의 의미는 input태그중에 type속성을 email로 가지고 있는 모든 태그들을 선택하는 타입선택자이다.

2. input태그에 width: 100%;를 주게되면 안에 들어오는 btn크기에 맞게 100%가 된다.

3. 버튼태그를 input태그안으로 넣기위해선 position값을 주어야한다. bhn태그는 position : absolute;로 주고 버튼태그의 기준인 form태그로 잡고 form태그의 position : relative;를 준다.

위의 태그를 적용하면 아래 이미지처럼 input태그안에 button이 들어간 것을 확인할 수 있다.
하지만 디자인으로서 아쉽다.

1
2
3
4
5
6
7
8
9

.mailing-form-btn{
    position: absolute;
    top: 30%;
    right: 10px;
    border: 0;
    background-color: white;
    color : #44b78b;
    cursor: pointer; /*닿으면 커서를 손가락모양 포인터로 변경시킴*/
}

4. top과 right를 input의 오른쪽중앙에 오도록 크기를 조절하면 된다

5. cursor는 button태그에 닿으면 커서가 화살표모양에서 손가락모양으로 변화하게끔 해주는 속성이다.

   • progress; 로딩모양의 커서로 변한다.
   • row-resize : 가로선 크기를 변화시켜주는 모양의 커서로 변한다.
   • 등등 많다.

코드를 적용한 이미지이다.
input태그안에 button태그가 조화롭게 잘 배치되어있고 커서모양도 submit위에 위치할때 손가락모양으로 변하는 것을 확인할 수 있다.

3. main의 side content 레이아웃 스케치

1. div.container-side-cta : 클릭을 유도하는 다운로드 요소가 배치되어있기에 a태그를 이용해서 버튼처럼 표현할 수 있다.

2. 다운로드 밑에 more로 추가설명링크가 있으므로 이것또한 a태그로 마크업해주면 된다. 그리고 > 부분은 가상요소를 이용하여 출력하면된다.

3. 최근 뉴스가 나오는 부분은 그 부분 전체로 완결성을 가지고 있으므로 article태그로 작성하면된다.

4. news의 날짜와 작성자가 출력되는 부분은 meta태그로 span, time 이용하여 작성하면된다.

5. 위의 2번과 마찬가지이므로 class를 이용하여 같이 스타일링하고 다른 부분만 id를 이용하여 적용한다.

6. 정의부분이기때문에 dl태그와 dt태그를 세트로 이용하면 된다.

4. 가상요소사용하여 “>” 만들기

아래 코드를 적용하면 바로 > 가 추가됨을 확인할 수 있다.

1
2
3

.more::after {
	content : ">";
}

5. nth-chird()

nth-child()는 괄호안에 오는 숫자에 따라 선택되어지는 값이 다르다.

• nth-child(8) : 8번째 요소를 선택하게 된다.
• nth-child(n+6) : 6번째 이후의 모든 요소들을 선택하게 된다.

더 궁금한 사항은 아래 링크를 참고하면 비쥬얼적으로 잘 나타나있어 이해하기 쉽다.

참고링크 : nthmaster

파이썬 인강 자기계발 챌린지 24회차 미션

1. a태그 버튼처럼 만들기

a태그를 css를 이용하여 버튼처럼 보이게 만들 수 있다.
또 가상클래스 hover를 이용하여 마우스를 올렸을때 색상변화를 주어 선택된 것처럼 보이게 만들어 더욱 버튼같은 느낌을 연출할수있다.

참고로 cta란 Call To Action의 약자로서 클릭유도라는 의미를 가진다.
hero-section자체가 클릭유도를 하는 곳이기때문에 실무에서도 cta로 사용한다고 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.cta{
    color: white;
    width: 300px;
    font-weight: 400;
    margin: 0 auto 60px;
    display: block;
    padding: 20px 50px;
    border-radius: 8px;
    background: #44b78b;
}

.cta:hover{
    background: #51be95;
}

아래 이미지는 위의 태그를 적용하여 a태그를 버튼처럼 보이게 만든 것이다.

2. 수평선만들기

border를 이용해서 원하는 곳에 수평선이든 수직선이든 다 그릴 수 있다.

1
2
3
4
5

.hero-section{
    padding: 50px 0;
    text-align: center;
    border-bottom: 1px solid #000000;
}

아래 이미지는 위의 태그를 적용하여 수평선을 만든 모습이다

3. 메인콘텐츠마크업

Django사이트의 메인콘텐츠를 어떻게 구성되어있는 지 확인하고 큰 스케치를 그려보자.

Stay in loop의 경우 중요한 부분이므로 h2로 작업하고 바로 밑의 설명은 여백이 있는 p태그로 진행하면 된다.

Using Django 와 Contributing to Django는 메일링 서비스이므로 중요한 영역이고 동일하게 float처리를 한 것으로 보인다.
따라서 h3로 작성하고 이름에는 a태그를 주어 관련된 링크로 이동시킬 수 있도록해야한다.

제출하는 곳은 form태그를 사용한다.

form태그 밑에는 설명영역을 한번 더 추가하면 끝! 설명영역은 구분될 수 있도록 여백이 있는 p태그를 이용하면 된다

4. 다양한 form태그 종류와 사용법

form이란 사용자의 서버에 전송하는 방법이다. 보통 어디에 활용할까?

• 로그인 : 아이디/비밀번호를 입력시
• 회원가입 : 개인정보를 입력시
• 블로그나 게시판 : 글작성이나 파일전송시

그렇다면 form태그는 어떻게 생겼을까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<form action="/url입력" method="post">
	<div>
		<label for="next">텍스트 필드</label>
		<input type="text" id="text"/>
	</div>
	<div>
		<label for="checkbox">체크박스</label>
		<input type="checkbox" id="checkbox"/>
	</div>
	<div>
		<label for="radio">라디오버튼</label>
		<input type="radio" id="radio"/>
	</div>
	<div>
		<label for="search">검색</label>
		<input type="search" id="search"/>
	</div>
	<div>
		<label for="textarea">텍스트 영역</label>
		<input name="textarea" id="textarea"/>
	</div>
	<button>전송버튼</button>
</form>

1. form의 action속성 : form태그로 입력받은 전체 내용을 어디에 보낼 것인지를 결정한다. 즉, 사용자가 입력한 데이터를 전송할 서버의 URL를 입력하면 된다.

2. form의 method속성 : form태그로 입력받은 전체 내용을 어떻게 처리한 것인지를 결정한다 즉, 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다. method는 기본적으로 get과 post방식을 지원한다.

   • get : action에 입력한 URL에 파라미터의 형태로 전송.
   • post : header의 body에 포함해서 전송.(보통 새로운 글등록할때 post방식사용)
   • delete : 정보를 삭제함.
   • put : 정보 전체를 수정 또는 정보 전체를 대체함.
   • patch : 정보 일부 부분 수정함.
   • 참고링크 : 제로초 HTTP 메서드

3. form태그 사이에는 텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그들이 들어가줘야한다.

4. label태그는 input태그가 무엇인지 설명해주는 태그로 lable태그를 사용하게 된다면 항상 세트로 lable태그와 input태그를 사용해야한다. 그리고 lable태그의 for속성에는 꼭 input태그의 id값과 동일한 값이 설정되어야한다.

이를 실습페이지에 적용해보자.
input과 button태그를 아래 이미지와 같이 생성한다.

placholder속성을 이용하면 사용자에게 어떤 걸 적어야하는 지 알려줄수있고 사용자가 입력하는 순간 사라지는 가이드라인이라고 생각하면 된다.

그리고 나면 아래 이미지와 같이 적용된 것을 확인할 수 있다.

파이썬 인강 자기계발 챌린지 23회차 미션

1. web font사용

폰트패밀리로 폰트를 지정해주었을 때, 만약 사용자가 해당 폰트를 다운로드해서 가지고 있지않으면 폰트 적용이 아예 안된다.
이를 방지하기위해 웹폰트를 사용하면 사용자가 굳이 다운로드하지않더라고 폰트가 적용된 채로 홈페이지를 볼 수 있다.

웹폰트는 무료도 있고 유료도 있지만 제일 유명한 구글폰트는 무료이다.

• 구글웹폰트

• 구글웹폰트깃허브 : 한글

• 눈누 : 한글폰트로 유로뿐만 아니라 무료상업용웹폰트도 쉽게 찾을 수 있다.

웹폰트 사용법은 간단하다. 웹폰트의 link태그를 복사하여 head태그 사이에 붙여넣기하면 된다.

2. a태그 밑줄제거 text-decoration: none;

a태그등을 링크를 나타나내는 태그를 사용하면 자동적으로 밑줄이 나타난다.
이를 없애주기 위해서 { text-decoration: none; }을 주면 된다

아래 1번은 a태그의 본래 그대로의 모습이고 이제 { text-decoration: none; }를 적용하면 3번처럼 밑줄이 없이 예쁘게 출력되는 것을 볼 수 있다.

3. 카테고리 기본 레이아웃만들기 display: block; + padding: 10px;

list-itmes밑에 있는 8개의 a태그를 한꺼번에 선택하는 방법에는 두가지가 있다.
편한 방법으로 선택해주면 된다.

1. 첫번째 방법 : .list-items a {}

   1 2 3 4 5

   .list-items a{ color: white; display: block; padding: 10px; }

2. 두번째 방법 : .list-items > a {}

   1 2 3 4 5

   .list-items > a{ color: white; display: block; padding: 10px; }

1번은 위의 태그가 적용되기 전의 모습이고 3번은 적용된 후의 모습이다.
패딩을 넓게 주어 사용자가 카테고리를 편하게 선택할 수 있도록 했다. 기본적으로 홈페이지 만들때 자주 사용되니 알아두면 좋다.

4. 가상클래스이용해서 마우스오버시 색상변경 구현

가상클래스를 이용하여 카테고리에 마우스를 올리면 글자색상을 변경해보자.
기존 글자색사은 흰색이고 해당 클래스에 마우스를 올리면 검정색으로 글자색이 변한다.

1
2
3

list-items > a:hover {
    color: black;
}

이러한 디자인으로 사용자에게 지금 어느 카테고리위에 마우스가 있는지 친절하게 알려주어 사용성이 올라간다.

5. float 적용방법

위의 이미지는 메인콘텐츠와 사이드콘텐츠에 각각 { float : left; }, { float : right; }를 주었다.
이로 인해 3가지 문제점이 발견된다.

1. 하늘색은 main태그인데 main영역이 메인콘텐츠와 사이드콘텐츠의 높이를 전혀 인지하지못하고 있어 히어로콘텐츠와 메인콘텐츠, 사이드콘텐츠의 높이를 함께 포함하고 있어야하는데 히어로콘텐츠의 높이만 인식하고있다.

2. 초록색은 footer태그인데 footer영역이메인콘텐츠와 사이드콘텐츠의 영향을 받고 있어 높이가 메인콘텐츠와 사이드콘텐츠만큼 올라와 있다.

float된 속성은 normal flow에서 벗어나기때문에 자기자신의 높이를 상위태그가 알지 못하게 된다.
normal flow에서 벗어났다는 의미는 해당 부분이 띄어져있다는 의미이다.
따라서 이에 영향을 받는 태그들에게 { clear : both; }를 해줘서 자신의 높이를 찾도록 해줘야한다.

1. 1번문제 해결방법 : float한 태그들을 div.container-float로 묶은 뒤 div.container-float에 가상요소를 주고 그 가상요소에 { clear : both; }를해준다.

   1. 메인콘텐츠와 사이드콘텐츠를 div.container-float안으로 감싸준다.

   2. .container-float에 가상요소를 주어 { clear : both; } 를 적용시킨다.

      1 2 3 4 5

      .container-float ::after{ //가상요소after display: block; content: ""; clear: both; }

2. 2번문제 해결방법 : footer { clear : both; }

   1. footer태그에 아래와 같이 { clear : both; }속성을 적용시킨다.

      1 2 3

      .footer{ clear: both; }

      

파이썬 인강 자기계발 챌린지 22회차 미션

이때까지 배운 HTML와 CSS를 가지고 Django 사이트를 만들어보는 실습을 해보자.
참고링크 : Django

1. 전체 페이지 레이아웃잡고 마크업하기

먼저 홈페이지를 보고 레이아웃을 잡고 미리 스케치하는 것이 좋다.
그래야 안 헷갈리고 필요한 태그들만 사용하여 깔끔한 마크업이 가능하기때문이다.

지난 포스팅에서 Django홈페이지 전체를 스케치한 이미지이다.

전체 홈페이지를 가장 큰 세가지부분으로 나눈다

1. Header
2. main
3. footer

그 뒤로 안에 있는 요소들을 스케치한 뒤 그대로 마크업하면 된다!
간단한 작업처럼 보이지만 깔끔하게 잘 만들기 여건 어려운 것이 아니다.
나도 강사님처럼 척보면 척하고 짜임새있게 짜고 싶다.

2. Header 전체구상

먼저 첫번째 큰 부분인 Header부분이다.
안을 보면 logo와 navigator로 나눌 수 있다.
logo안은 이미지태크와 링크를 넣어 이미지를 누를때마다 홈으로 돌아가게끔 구현할 것이다.
navigator는 ul태그로 만들어서 li태그에 a태그를 넣어 li태그를 누를때 관련 페이지로 이동할 수 있도록 구현할 것이다.

1. logo

   • logo
     • img + link to home

2. navigator

   • list
     • li + link to overview page
     • li + link to download page
     • li + link to documentation page
     • li + link to news page
     • li + link to community page
     • li + link to code page
     • li + link to issues page
     • li + link to about page

스케치를 보고 그대로 html를 작성해주면 좋다.
위의 이미지처럼 class 이름까지 지정해서 하면 훨씬 편하고 빠르게 마크업할수있다.

li태그와 a태그는 묶어서 총 8번 작성해야한다.
이때 효율적으로 코드를 작성할 수 있는 방법이 있다.

1
2
3
4
5
6
7
8
9
10
11
12

 (li>a)*8
 
 
 // 출력값은
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

li태그 안에 a태그를 만들고 전체를 곱하기 8번해서 총 8개의 태그를 만들게 된다.
참~ 쉽죠?

3. max-width 속성과 min-width속성

브라우저의 크기를 조절할때, 브라우저가 일정한 크기에 도달할 경우 더이상 콘텐츠의 크기도 같이 줄어들거나 늘어나지 않는다.
이러한 속성을 max-width와 min-width라고 한다.

브라우저 전체 넓이가 1060px이 되면 더 이상 줄어들지 않도록 지정하고 1400px이 되면 더 이상 늘어나지않도록 지정해보자.

이를 위해서 먼저 생각해야할 것이 어느 부분에 max-width와 min-width를 적용시킬 것인 가이다.

브라우저 전체 넓이가 일정크기보다 작아지면 모든 요소들이 다 작아지다가 멈춰야하므로 body에 min-width를 주면 된다.

반면 브라우저 전체 넓이가 일정크기보다 커지면 header는 크기와 상관없이 양옆에 컬러가 계속 칠해져있어야하므로 container를 주어 container태그안에 max-width속성을 적용하여 디자인을 유지할 수 있다.

1
2
3
4
5
6
7
8

body{
    min-width: 1060px;
}

.container{
    max-width: 1400px;
    margin: 0 auto 0 auto;
}

4. margin과 padding의 단축속성

margin과 padding값을 주는 데는 총 4가지 단축 방법이 있다.

1. { margin: 0 auto 0 auto}
   이렇게 4개가 나열되어 있는 경우의 순서는 top right botton left순이다.

2. { margin: 0 auto 10px }
   이렇게 3개 값이 나열되어 있는 경우에는 순서가 첫번째값은 top, 두번째 값은 left와 right 그리고 마지막 값은 bottom이다

즉 { margin: 0 auto 10px } 는 { margin: 0 auto 10px auto} 와 동일한 값을 가진다.

3. { margin: 0 auto }
   이렇게 2개가 나열되어 있는 경우의 순서는 첫번째값은 top botton에 적용 두번째 값은 left와 right에 적용된다.

즉 { margin: 0 auto } 는 { margin: 0 auto 0 auto} 와 동일한 값을 가진다.

4. { margin: 10px }
   이렇게 1개 값만 있는 경우는 어디에 값이 적용될까?
   정답은 모든 곳에 적용된다.
   다시말해 10px이 top right botton left에 각각 적용된다.

즉 { margin: 10px } 는 { margin: 10px 10px 10px 10px } 와 동일한 값을 가진다.

5. display: inline-block;

display속성에 inline-block을 넣어보자.

1
2
3
4
5
6
7

.nav{
    text-align: right;
}

.list-items{
    display: inline-block;
}

아래 이미지를 순서대로 본다면 1번에는 적용되지 않은 순수한 모습에서
위의 코드를 적용한 후 3번을 본다면 예쁘게 오른쪽으로 카테고리가 일렬로 배열되어 있는 것을 확인할 수 있다.

6. position: absolute; 와 relative; 적용

가장 헷갈리는 position속성을 적용하기 전후를 비교해보자.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

.container{
    max-width: 1400px;
    background-color: red;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; //normal flow의 속성에 변화가 있는 것이 아니기때문에 화면에 출력될때 변화가 없다
}

.logo{
    position: absolute;
    top: 0;
    left: 0; 
}

1번은 위의 태그를 적용하기 전의 모습이고 container클래스에 position: relative;를 적용하고 logo클래스에 position: absolute;를 적용을 하면 아래 이미지의 3번으로 화면에 출력된다.

파이썬 인강 자기계발 챌린지 21회차 미션

1. Reset보단 normalize

기본값으로 설정된 css가 레이아웃을 잡을때 불편함을 초래하기도 한다.
이에 reset을 시켜주는 코드들이 생겨났다.
하지만 reset코드들은 오래된 것들이 많아 요즘 유용하게 쓰이는 기본값까지 초기화시켜버리기떼문에 효율적이지 못하다.

따라서 최근에는 normalize를 더 많이 사용한다.

Normalize.css 파일에 들어가서 다운로드를 누르면 css 파일이 나오고 해당 파일 코드를 전체복사하여 내 프로젝트에 normalize.css로 새로운 파일을 만들어 전체붙여넣기해준다.
normalize.css안에는 주석으로 해당 코드들이 어떤 역할을 하는지 자세하게 알려주어 필요한 코드만 사용할 수 있고 필요하지 않는 코드들은 삭제하기만 하면 된다.

2. 기본 box-sizing 잡기

레이아웃의 에러를 최소화하기 위해서는 box-sizing을 border-box로 하는 것이 좋다.
여기서 *는 모든 영역에 적용한다는 뜻이다.
*::before와 *::atfer는 숨은 영역을 뜻한다.

1
2
3
4
5
6

*, 
*::before,
*::atfer {
	box-sizing : border-box;
}
 box-sizing을 border-box

3. 레이아웃짜기 hero-section

웹페이지를 구성할 레이아웃을 짜본적이 없어서 혼자서 웹페이지를 만들때 수정을 엄청 많이 하게 된다.
그래서 다른 사람은 어떻게 짜는 지 궁금했는데 강사가 자신이 왜 이렇게 레이아웃을 짜게 되었는지 설명을 해줘서 좋았다.

hero-section을 처음 듣게되었는데 이는 해당 웹페이지가 중요시하는 콘텐츠를 먼저 배치하고 링크를 걸어두는 것이다.

아래 이미지는 강사님이 장고사이트의 레이아웃을 분석한 것이다.

4. Pseudo-class 가상클래스 (hover, active, focus 등 )

가상클래스를 사용하여 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을 때 css요소를 적용할 수 있다.
예를 들면 아래 태그는 a태그에 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을때 배경색상 변경하는 코드이다.

• hover : 마우스가 올라가 있는 경우
• active : 활성화되어 있는 경우
• focus : 키보드로 선택되어있는 경우

1
2
3
4
5
6

a : hover,
a : active, 
a : focus {
/* a 요소에 
background-color : orange;
}

5. Pseudo Element 가상요소

없는 태그를 css로 넣어줄수도 있다.
아래는 h2태그에 가상의 태그인 >를 넣는 태그이다.
가상태그는 html에서 드래그를 하려고해도 드래그가 되지 않는다.
말그대로 가상태그이기 때문이다.

1
2
3

h2 ::before{
	content : " > "
}

아래 이미지는 h2태그에 가상의 태그인 손가락이모티콘을 표현했다.

6. Cascading 캐스캐이딩

캐스캐이딩은 폭포라는 의미를 가지고 있다.
웹페이지의 디자인이 아래 3가지 디자인과 결합할 수 있기때문에 그 결과값이 내가 예상한대로 나오지 않을 수 있다.

• 웹브라우저의 기본 디자인
• 브라우저 사용자의 디자인
• 그리고 웹페이지 저자의 디자인

따라서 선택자 구체성 점수를 매겨서 우선순위를 잘 파악하고 있어야한다.

7. 선택자 구체성 점수

선택자와 요소에 따라 아래와 같이 다른 값을 매기고 이를 더해주면 어느 것이 더 우선순위인지 확인 할 수 있다.

• HTML태그의 style속성 사용 : 1000점
• ID선택자 : 100점
• CLASS선택자와 가상클래스 : 10점
• TAG선택자와 가상요소 : 1점

사용한 태그가 위의 4분류중 어디에 속하는 지 잘 모르겠는 경우에는 구체성 계산기에 접속하여 궁금한 태그를 복사 붙여넣기하면 된다.
계산기가 자동적으로 사용된 아래 세가지

• ID선택자 갯수
• CLASS선택자와 가상클래스 갯수
• TAG선택자와 가상요소 갯수

를 알려준다 그걸 기준으로 위의 점수표와 함께 계산하면 된다.

파이썬 인강 자기계발 챌린지 20회차 미션

nomal flow에서 벗어나 복잡한 방식의 레이아웃을 하는 방법에 대해 알아보자.
크게 두가지 속성으로 사용할 수 있다.

• float

• position

1. float

float로는 정교한 레이아웃을 작성할 수 있다.
float는 이름그대로 띄우는, 뭔가 떠있는 배치이다.

먼저 비교를 위해 아무것도 적용안된 레이아웃을 보자.
일반적인 단락을 나눈 줄글의 형태이다.
가로로 나눠진 단락을 세로로 나누고싶을때 float가 유용하다.

이제 float는 left와 right로 줄 수 있는데 아래 이미지는 float : left;로 적용한 모습이다.
아래 이미지에서 알 수 있듯이 해당 태그가 왼쪽으로 띄어지고 밑에 배치되었던 줄글이 태그옆으로 옮겨지면서 자연스럽게 흘러내려가는 형태를 취하고 있다

여기서 footer가 조금 아쉽다.
column 3개에만 float : 30%;씩 적용해주었는데 10%가 남다보니 footer의 위치가 어색하게 되어버렸다.
따라서 column들만 float left로 주고 footer는 하단에 배치하고싶다면 아래와 같이 clear : both; 속성을 넣어주면 된다.

clear는 left, right, both 의 값을 선택할 수 있고 해당 사이드에 float정렬을 취소한다.
따라서 현재상황에서는 clear : left; 또는 clear : both; 로 같은 결과값을 출력할 수 있다.

짜잔- 세상 깔끔하다!

2. position

1. static

postion 속성의 default 값이다.
HTML 태그 순서에 따라 화면에 출력된다.

2. relative

원래 위치를 기준으로 상대적인 위치를 지정해줄 수 있다.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.
여기서 중요한 점은 태그의 원래 위치는 변하지 않는다는 것이다. 없어지지 않고 기억되어져 있다.

하트의 위치에서 top과 left에 100씩 값을 주어서 하트가 글 위로 오게되었다.
여기서 쉽게 헷갈릴 수 있는 점이 있다.
바로 하트가 top과 left로 100씩 움직이는 것이 아니라, top과 left에 100씩 빈 공간을 준다고 생각하면 된다.
빈 공간만큼 원래 태그는 밀려나게된다.

3. absolute

relative와 비슷하지만 차이점이 있다면 relative는 원래 태그자리를 빈공간으로 유지하는데 반해, absolute 원래 태그자리를 없애버리고 상대적인 위치에 위치한다.
absolute는 상위태그를 기준으로 상대적인 위치를 정한다.

4. fixed

absolute와 상대적인 위치를 가진다는 것은 비슷하지만 상위태그기준이 아닌 veiwport(웹페이지가 보이는 화면)을 기준으로 뷰포인트의 특정 위치에 태그를 고정한다. 따라서 스크롤을 내려도 태그는 같은 위치에 고정되어있다.

3. css선택자 우선순위

선택자는 총 3종류가 있다.

id선택자 > class선택자 > tag선택자

만약 id와 tag에 둘다 css값이 적용되어 있으면 id클래스가 우선이므로 tag값에 덮어씌어져서 id 클래스값이 출력되게 된다.