일단 하나를 해보자

0810화요일 수업기록

저번시간 블록레벨이랑 인라인레벨했었는데

display속성사용하면 블록레벨 요소랑 인라인 레벨

요소를 서로 바꿔서 사용할 수 있다.

display속성은 주로

웹문서의 내비게이션(옆으로 뜨는 카테고리 창같은거)

내비게이션을 만들면서 메뉴항목을 가로로 배치할 때 주로 사용

이미지를 표형태로 배치할 수도 있음

display : block ->인라인 레벨 요소를 블록레벨 요소로 만든다.    
display : inline ->블록레벨 레벨 요소를 인라인 요소로 만든다.    
display : inline-block ->인라인과 블록의 속성을 모두 가지고 있고 마진과 패딩을 지정할수 있다.    
display : none ->해당 요소를 화면에 표시 하지 않는다.

내비게이션 구성할 때 <nav>라는 태그를 사용합니다

p태그 넣고 이미지 나란히 하고 싶은데

p태그는 블록레벨이라 이미지와 나란히 한줄못써

그럴때는 플롯이라는 속성이용하면돼

거기서 이미지 표시하고 주변에 택스트 감싸게

float  : left ->해당 요소를 문서의 왼쪽에 배치                  
         right->해당 요소를 문서의 오른쪽에 배치                  
         none->좌우 어느쪽에도 배치하지 않는다 default

플롯은 웹요소를 붕떠있게하는 거 그게 왼쪽구석이냐 오른쪽구석이냐 플롯 레프트 롸이트 아무것도 아닌 none

이렇게 3개있음

이렇게 왼쪽 배치하면

그다음에 넣는 애들도 똑 같은 속성값 반영되어버림

내가 플롯요소를 하나에만 넣고 싶은데 밑에 해제안하면

밑에도 전달됨

그래서 플롯 속성더이상 유효하지 않다는 속성 넣어줘야함

클리어!!

clear left -> float left 해제 
       right-> rigt해제
       both->둘다해제

왼쪽부터 차례대로 정렬됨배치됨

근데 3은 플롯 지정안해서

웹브라우저 기본 흐름대로 배치된거.

클리어 주면 이렇게~

플롯레프트랑 인라인블록이랑 뭔차이냐~

눈으로는 동일. 똑같이 가로 배치

근데인라인블록은 차이가 있어.

결과화면은 같은데

인라인 블록으로 세팅하면 가로로 배치를 하긴하지만

마진이랑 패딩값을 기본으로 갖고 있고

플롯으로 배치하면 가로배치될 때 마진이랑 패딩값이 없어

플롯으로 요소 배치할 때 만약 마진이랑 패딩필요해 그러면 지정 별도로 해야되고

클리어 속성으로 플롯레프트 해제해야한다.!!

플롯이랑 클리어 속성 잘 쓰면 레이어만들 때 잘 활용할 수 있다

미리 레이아웃 그림으로 그려놓고 세팅하는게 제일 좋다! 헤더는 주로 웹페이지 상반부

본문은 메인컨텐츠

레이아웃짤 때 미리 구성해~

제목 위에 들어가기

카테고리 나타낼거 사이드바.

본문 메인 컨텐츠영열

Footer 맨 밑에 들어갈거

내가 따라 하면서 안됐던게

처음에 정한 전체 너비보다

사이드바, 본문의 두 너비 합한 게 커서 그랬음(그래서 플롯써도 옆에와서 안붙고 밑에 있었음)

근데 처음에 전체 컨테이너 잡을 때 너비만 지정하고 세로값은 안줘서 궁금함..

position            
static : 문서의 흐름에 맞춰 배치.default (위치를 지정해서 배치)       
relative : 위칫값을 지정할수 있다는 점을 제외하면 static      
absolute : relative값을 사용한 상위요소 기준으로 위치를 지정해서 배치        
fixed : 브라우저 창을 기준으로 위치를 지정해 배치 (고정역할)

absolute를 사용할때 주의해야 할점

위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정....

만약 부모요소중에 없으면 상위요소를 찾고 이것마저 없으면 더 위의 요소를 찾는다.

absolute를 쓰고 싶다면 부모요소에 relative를 지정해야 원하는 대로 배치할수 있다.

화면을 줄여도 고정되어있는 사각형 

만들기~~

Absolute를 사용할 때 주의할점

위치값을 지정하면 요소중에서 relative를 사용한 요소를 기준으로 위치를 지정함…

만약 Absolute을 준 요소, 의 상위를 찾는데 만약 

근데 그 위에 요소도 없어 그러면 더 위에 올라가서 찾게 됨.

(=만약 부모요소에서 없으면 상위요소를 찾고

이것마저 없으면 또 위로 올라가서 찾아~

할아버지 찾고~)

결론 어떠한 요소에 Absolute를 쓰고 싶다면

부모 요소에 반드시 relative를 지정해야 원하는대로 배치할 수 있다.

background-repeat        
repeat : 브라우저 화면에 가득찰때까지 가로세로 반복 default        
repeat-x : 브라우저 화면 너비에 가득 찰때까지 가로로 반복        
repeat-y : 브라우저 화면 높이에 가득 찰때까지 가로로 반복        
no-repeat : 한번만 표시하고 반복 ㄴㄴ                

background-position  : 배경이미지의 수평,수직 위치값을 설정할수 있음.

값두개있는거-> 레프트는 수평 center는 수직

하나있으면 수평위치값 (수직 위치값은 50이나 센터로 간주)

사실 50,센터? 하는 말 다 적긴했는데 지금보니 뭔소리인지 잘모르겠네

박스 모델에 패딩이나 테두리가 있다면 배경이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시 할수 있음.
배경 이미지를 적용할 범위는 background-origin속성으로 지정함.    
content-box : 박스 모델에서 내용부분에만 배경이미지 표시 default   
adding-box : 박스 모델에서 패딩까지 배경 이미지 표시    
border-box : 테두리까지...

예시)
 background-origin: content-box;

background-attachment

scroll : 배경이미지도 스크롤 default
fixed:  화면을 스크롤 하면 배경이미지는 고정되고 내용만 스크롤

예시)  background-attachment: fixed;

background-size
background-size: cover; 배경이미지로 요소 모두 덮어버림
background-size: contain; 배경이미지가 다 들어오도록 잡음

하위선택자

특정 요소를 기준으로 그안에 포함되어있는 녀석 :하위요소

현재기준으로 한 단계아래 자식, 또 아래는 손자.

하위선택자 쓰면 부모요소에 선택된 모든 하위요소 선택됨

자식선택자

인접형제 선택자 라는게 있어
웹문서에서 부모 요소가 같을 경우를 형제관계라고 함

형제요소 중에서 첫번째 동생요소만 선택하는 것을 인접 형제 선택자
요소1+요소2

형제요소 중에서 전체 동생요소 선택하는 것을 인접 형제 선택자
요소1~요소2

참고로 h1,p {} 랑 다른게

그렇게 하면 h1의 설정값도 저렇게 바뀜

속성 선택자

태그안에 사용하는 속성값에 따라서

태그를 속성하는 역할…상황에 맞는 스타일 지정하기쉬움 

대괄호 안에다가 원하는 속성 넣어주면됨

[] 이게 찾으려고 하는 속성의 이름
ddd 부분이 스타일

0809수업기록

속성넣고 속성값은 세미콜론(;)으로 구분!!

포지션 꼼꼼하게 봐야돼! 자주쓰지만 그만큼 실수 할수도 있음

* {} 
전체 선택

마진 값과 페딩값을 

0해놓고 많이 시작하는 듯함.

스타일 시트는 크게 두 가지로 구분됨

1. (기본스타일) 웹브라우저  스타일 이랑

2.사이트제작자가 만드는 사용자 스타일

사용자 스타일에서도 나뉨 크게 3개로

1. 인라인 스타일(간단한 스타일 적용하는거.)

2. 내부 스타일시트(하나의 웹문서 스타일 써주는 방금한게 내부스타일)

3. 외부스타일(링크불러서 걸어주는거 가장 많이 쓴다함)

선택자

1. 전체 선택자: 스타일을 문서의 모든 요소에 적용할 때 사용.

주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용.

*{속성:값…}  이렇게 생김

전체스타일은 주로 기본 스타일초기화할 때 자주사용

마진/ 페딩: 웹문서 내용을 브라우저 창에서 바짝붙지 않게 하는 여백 

2. 타입 선택자: 특정 태그를 사용한 모든 요소에 스타일 적용

= 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에

적용된다. (타입선택자나 태그 선택자 같은말~)

ex) h태그,p태그

3. 클래스 선택자

같은 태그라도 일부는 다른 스타일을 적용하고 싶다면 클래스 선택자를

사용한다. 

얘는 태그에다가 클래스선택자를 넣어주면 돼~

클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별함.

요소 하나에 클래스 스타일을 2개 이상 적용할수있는데 그럴때는 공백으로

구분한다!!

class이름은 기억하기 쉽게 임의로 지정하면 됨!!! bg백그라운드

이름이면 name이렇게 누가봐도 알수있게!!!

4. id 선택자

클래스 선택자랑 거의 비슷해 그거랑 마찬가지로

웹문서의  특정부분 선택해서 스타일 지정할 때 사용

얘는 점대신 샵쓴다. #

이 기호만 틀리다 틀리지 정의같음

#아이디명 {스타일어쩌구}

차이는 있음 – 클래스 선택자는 문서에서 여러 번 적용할 수 있음. id선택자는

문서에서 한번만 적용할 수 있음. 이러한 성질 때문에id선택자는 중복해서

적용할수없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나

아니면 웹요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용

margin
오토하면 중앙배열됨

5. 그룹선택자

같은 스타일 규칙을 사용하는 경우 (콤마) ,로 구분해서

선택자를 나열한 다음

스타일 규칙을 적용

h1,p{속성..}

1em이 16픽셀임

<header>

스타일시트에서는

우선순위 존재하는데, 위에서 아래로 적용된다.

(css는 우선순위가 있는 스타일시트다~)

CSS = 캐스캐이딩(위에서 아래로 흐르는)
스타일끼리 충돌,중복되지 않도록 막아주는 중요한 개념

스타일이 충돌하지 않게하는 방법으로 두 가지정도가 있음

1. 스타일 우선순위:

스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정된다.

그 우선순위에 따라 위에서 아래로 스타일을 적용한다.

2. 스타일 상속:

태그의 포함관계에 따라 부모요소의 스타일을 자식 요소로

위에서 아래로 전달!

1. 스타일 우선순위 

: 어떤 스타일을 먼저 적용할거냐 결정하는 규칙

 <3가지 개념에 따라 지정>

1. 얼마나 중요하냐.

웹브라우저에서 내용표시할 때 css스타일만 적용하는게 아니고

컴퓨터 사용자스타일, 웹문서 제작자 스타일, 웹브라우저 디폴트 정해놓은 스타일 3가지를 다 쓰는데

사용자 스타일이 젤 중요 > 그다음 제작자 스타일 > 그다음이 디폴트 스타일

2. 적용범위는 어디까지냐?

중요도가 같으면 스타일적용범위에 따라 우선순위정할 수 있는데

스타일 적용범위가 좁을수록

정확히 필요한 요소에만 적용한 스타일일수록

우선순위 높아져

스타일 규칙에다가..

!important 이렇게 붙여놓은애들은 다른애들보다 우선순위 높아져

적용범위에 따라 우선순위 높은거 나열한다면

!important > 인라인 스타일 > id스타일 > 클래스 스타일 > 타입 스타일

임포터!important가 없다면

타입스타일이랑 인라인 스타일 둘다 박아놨을 때 인라인스타일(HTML 태그 명령어 라인 내부에 스타일 정의)이 먼저뜨겠지!

웹문서에 사용되는 태그들은 서로 포함함

포함된 태그~

스타일 시트는 부모요소 속성들이 전달돼~ 감싸고 있다고~~

자식과 부모간의 성립된다는 가정 하에 부모태그에 스타일주면 자식에서 별도 적용하지 않으면 다 전달됨. 스타일 상속.

객체지향프로그래밍..

수업중에 나온 말인데 잘 모르겠어서 링크걸어둠..

<body>최상위 부모…

바디는 웹문서 전체 적용… 이거를 잘 이용하면 동일 적용시에 잘 쓸수있음.

맨 마지막 숫자는 불투명도값!!

클릭하면 16진수/rgb/hsl 모드 바꿀 수 있음

텍스트 문단 정렬

 정렬 방법 지정하지 않으면 기본적으로 왼쪽 정렬이 된다.

줄간격을 원하는 만큼 조절할 수 있다

 line-height: 숫자px;

->간격조절하는 애
px말고 퍼센트도 가능!

문단정렬 조정

text-align 

text-shadow
text-transform
letter-spacing

word-spacing (잘안씀)

list-style-position

글자 간격조절 일반적으로 em 픽셀 퍼센트로 조절해~

padding

(위 오른쪽 아래 왼쪽 이렇게 설정값 읽힌다고 했음 링크눌러보면 뭔말하는지 알거야)

외부 / 기본형 / 내부 / 인라인 스타일 시트

쇼핑몰 만들기 (by선생님)

<span>
HTML <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. 
<span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소입니다.

이건 내가 만든 거

가운데 정렬해볼라고 이것저것 넣어봤는데

지금보니까 몇 개는 있으나 없으나 같네

저 display:  쭉 있는거는

이미지를 가운데에 넣고자 margin: 0 auto; 넣어도 안되길래

인터넷이 알려준대로 넣어보니까 됐다...

박스모델: 웹문서의 내용을 박스 형태로 정의하는 방법

요 개념은 매우 자주 사용하므로 반드시 기억할 것

이 박스모델이 다 모여서 웹문서를 이룬다고 생각

마진, 페딩 테두리….css에서 빈번히 등장하는 개념

박스모델은 두가지 나열하는 방법이 있는데

요 개념은 매우 자주 사용하므로 반드시 기억할 것~

박스모델은 두가지 나열방법  두가지에 따라 나열 방법이 틀려져~~

1. 블록레벨 요소

태그를 사용해서 요소를 삽입했을 때 혼자 한 줄을 차지 하는 녀석

너비width가 100프로라는 뜻

대표적인게 h1,div,p태그 등등

블록너비 요소에 왼쪽 오른쪽에 다른게 못들어온다는 뜻

2. 인라인 레벨요소

2. 인라인레벨요소

한줄을 차지 하지 않는다.

콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.

한줄에 인라인 레벨 요소들이 여러 개 올 수 있따!

예를 들어 스팸spam img strong…..

박스 크기 조정

콘텐츠와 콘텐츠 스타일 사이 여백 마진으로 둠. 

가로 와 세로 콘텐츠 영역, 크기 지정할 때 사용

오토라고 하면 콘텐츠 양에 따라 자동으로 지정된다~ 보통 오토 많이 넣기도 함. …

디폴트값. 안넣으면 지가 알아서 해줌 

여기에서 가로와 높이는 박스모델에서 콘텐츠 주변의 여백이나 테드리를 뺀 컨텐츠 영역의

크기 표시 (콘텐츠 여백은 20)

웹문서에서 레이아웃구성할때는 css에서 박스모델 사용하는데

요소크기 쉽게 계산하려면 박스 사이징 속성을 보더박스로 지정해주는게 좋다

박스 사이징

웹문서에서 레이아웃구성할때는 css에서 박스모델 사용하는데

요소크기 쉽게 계산하려면 박스 사이징 속성을 보더박스로 지정해주는게 좋다

씨언어 시계방향 순서로 돌아(탑 라이트 바텀 레프트)

보더 테두리 스타일지정 해줌

bordr-radius
모서리 둥글게!
(이미지도 만질 수 있음)

공부하면서 참고한 영상!

https://youtu.be/T7h8O7dpJIg

<table>웹페이지에서 테이블을 만들기 위해서는 table 태그 사용함

<tr>테이블의 행(row가로줄)을 표현하는 태그

<th>열(column세로줄)의 제목을 표현하는 태그

<td> th와 마찬가지로 tr태그 안에서 사용
테이블에서의 각각 데이터를 담고있는 셀을 나타낸다.

이렇게 하고 style을 

적용해야 선이 생김

, 콤마 찍어서

한번에 값 줄 수 있음

border
padding 여백

셀병합도 속성 부여하면 됨!

위에가 셀병합한 거임

rowspan="" 가로줄, 행 ""개 셀 합하겠다
colspan="" 세로줄, 열 ""개셀 합하겠다

합할 거 태그 안에 넣어주면 됨

<textarea> 
여러줄의 텍스트를 입력받을 때 사용!

<textarea rows="" cols=""></textarea>
텍스트 (가로세로)줄수

인풋대신 버튼 만들수도 있어!

으라챠챠챠 복습끝~~~~

2일차 0806 수업

#form

<form action=""></form>
사용자가 입력한 정보를 서버로 전송할 때 사용한다.

로그인이나 회원가입 등 아이디랑 비번 입력하면 서버쪽에서 

가지고 DB확인. (암호화해서 보내면 서버에서 매칭해줌)

/ 는 주소 구분

입력받는 태그 <input>

#form전송

method="POST"
어떤 걸 입력했는지 제출했을때 안뜸!

method="GET"
아이디에 뭐썼고 비번에 뭐썼는지 보임

배울 때 저 

name

value

의 차이가 뭔가, ""안에 어떻게 써야하는건가 어려웠는데 

name을 내가 임의로 짓는 이름

value가 서버로 전달되는 정보값인가? 로 일단 이해함

!

파일명, 폴더명의 중요성 어필

네이밍 중요하다

누가봐도 알 수 있게 이름지을 때 풀네임으로 짓는 게 좋다.

#중복선택/단일선택 폼

방금 문제원인 찾았다...

나는 왜 value값이 제목으로 들어가고 그다음 작성한 값이 셀에서 튀어나오나..

취미선택 1개만 되어야하는데 왜 중복으로 되는가..

뭐가 문제인지 몰라서 밑에 똑같이 다시 써봤는데

인풋타입 radio를 "안닫고 써버려서 name이랑 합쳐진거였다

<label>은 인풋테그 쓸 때 연결해서 자주 쓴다

라벨을 인풋 요소와 연관시키려면 

<input>에 id속성을 넣어야한다. 그런 다음 <label>에 id와 같은 값을 for속성을 넣어야 한다!

(둘이 같이 다녀~)

id는 하나만 됨, 고유함

<fieldset> 하나의 폼에서 여러 구역을 나눠서 표기할 때 사용(그룹화함)

<legend> fieldset으로 묶은 그룹에 제목을 붙여준다

#날짜

근데 얘는 id넣었는데 for안넣어도 되나보네

위에꺼는 라벨, 인풋을 따로써서 연결한거고 라벨 안에 인풋써서 그런가? 흠 알다가도 모르겠구만.

id는 고유한 값으로 한번만 쓸 수 있지만
class는 여러 번 쓸 수 있다! 막써도 됨. 애니메이션 등 모양바꾸고 꾸미는 역할해줌

#

autofocus 는 깜박이는 커서
required 는 반드시 입력해야하만 하는 내용, 빈칸전송시 오류라고 표시됨
placeholder 처음부터 저렇게 표기되어 나타남

lable class="res"

에서  class="res"

은 왜 있는거지??? 

빼본거랑 차이가 없어서 모르겠다.

#select

<select> 선택툴

오 인풋자리에 들어가는거같음 얘도 id로 라벨이랑 연결하는구나..

<option value=""></option>
선택옵션
option value-> 서버에 전송할 값을 뜻함

div 콘텐츠
엄청많이씀!

#경로 조심!!

위처럼 깔끔한 이유는 ul에 스타일 적용했기 때문인데

보통 스타일을 html에 넣지 않고 css파일 만들어서 따로 담아줌

이때 style을 따로 폴더링하니까

링크를 연결해줘야함!!!

style에서 태그로 직접 디자인

{} 비어있다는 뜻

필드셋 너비 500픽셀로

list-style: none;으로

ul의 동글벵이 뺌 (위 이미지가 뺀거임)

list-style
text-align 가로정렬
foat 주위감싸는 텍스트정렬설정
padding-left 안쪽 여백 영역 설정

(style은 body보다 앞에 뜨게 head에 넣어줌)

href에 경로설정! 

아까 계속 스타일이 적용 안돼서 

당황했는데

./에는 없었고

../에는 있더라고! 그렇게 연결했다.

2일차 0806 수업

제목으로는 내용을 써야겠으

<img src=" 사진경로 넣어주면됨"/>

에러 나길래 찾아보니까 이미지 경로 지정방법 절대경로/상대경로있다는데

절대경로- 웹페이지 "이미지주소복사" 해서 넣은 방법이라 생각.

상대경로- 이미지 삽입할 HTML문서 기준으로 경로 인식(, 내 컴퓨터파일에 있는 사진경로)

하위폴더로 이동하는 법: 하위 폴더명 적어주고 /

상위,하위폴더 뭔말인지는 모르겠지만 경로찾는 법은 밑에걸 써서 했음 

../  는 상위폴더로 이동하는 법

이미지 파일이랑 html파일이 다른 폴더에 있으면 이미지 파일경로 넣어줘야함!!

alt는 이미지 깨졌을때 안내문구
width 너비 
height 키

png 원본손실이 없는 무손실 압축, 일반적으로 웹에서 가장 많이 사용
jpg 손실압축으로 사진 이미지의 압축 효율이 좋음 주로 사진 이미지를 저장하는데 사용
gif 애니메이션을 지원함, 짤
svg (일반적으로는 잘 안쓰지만) 안깨져
raw 압축 이전의 확장자, 원본파일, 한 픽셀에 대해서 rgb색값이 있음
(->raw모드로 이번 포스터촬영해서 용량거덜났잖아 나..)

근데 걍 X방향 너비w Y방향 키,높이h로 생각하면 될 듯