학습내용

- 웹사이트 제작에서 디자인을 담당하는 CSS의 기초

1. 디자인을 적용하는 3가지 방법

• html에서는 style속성값을 사용한다.
• css에서는 {}중괄호 안쪽에 기입
  • 속성값 끝에는 ; 붙여줘야 이후의 css도 적용된다.

위의 두가지 방법은 코드의 양이 늘어나면 가독성이 떨어진다.

• 링크 태그 방식으로 적용
  • 실무에서는 html / CSS 언어끼리 따로 묶어 두개의 파일로 작업을한다
  • 두개의 파일을 연동해주어야 한다.
    html파일기준으로 css파일을 가져와야한다(link태그를 사용)

    <link rel="stylesheet" type="text/css" href="">```
    stylesheet - 링크태그로 연동되는 파일의 타입 - 디자인을담당하는문서다
    text/css - 연동되는 파일의 글자는 css로 구성되어있다.
    href 연결될 파일 경로 - 같은공간일때는 파일명과확장명만

2. CSS에서의 부모자식관계

• 태생적으로나 혹은 자식으로써의 속성 > 부모의 속성
  but 부모태그를 명시함으로써 따로 적용가능하며,(','and)의 개념으로 묶어서 적용가능

3. 선택자 개념

• css에서 html에 접근하는 방법
  stlye : html태그를 기준으로 접근하고자 할때
  id : 태그에 고유의 이름을 붙일 수 있다. (css에서 #id속성값으로 지정)
  class : 태그에 별명을 붙일 수 있다. (.class속성값으로 지정)
  atribute : html의 어떤 type의 속성값을 기준으로 디자인을 적용하는방법 ex)input태그

4. 언제? id? class? 사용?

• 별명(class)과 이름(id)의 차이점

	사람1	사람2
id(이름)	철수	영희
class(별명)	멍청이,식충이	멍청이

별명은 한 사람당 여러개의 별명을 가질 수 있다.(여러 속성값)
but 이름은 하나만(하나의 속성값)

동일한 클래스명(별명)을 여기저기 사용가능
동일한 id(이름)은 한 문서에 하나만

5. css코딩의 우선순위 캐스케이딩

• 어떠한 디자인을 더 우선순위로 처리할지에 미치는 개념
• 동일한 태그는 나중에 적용된 속성값이 우선
  but ( style속성 > id > class > 태그) 순서대로, 경로가 디테일 할수록 우선순위 적용

• 원본코드를 유지한 상태에서 새로운 css코드를 추가하여 디자인을 덮어씌우고 싶을때 사용
  (더 상위개념으로)

6. CSS의 여러속성

• 공간의크기

  • width, height (초기배경컬러투명상태임)
  • px은고정값(브라우저크기가 바뀌어도 변하지 않음)
  • % 가변성(브라우저 크기가 바뀔때 리사이즈) - 기준이 무엇인가?
    가변값의 기준점 - 부모개념 태그의 공간크기가 기준
    ex)부모태그가body이면(브라우저의크기와동일한~),따로 설정되어있으면 그 크기가 기준
  • min,max -width,height 가변성을 적용한 속성안에서 사용된다. 상하한선을 설정

• 공간의테두리

  • border(동시에 3가지 속성값 기입 가능(선종류, 굵기, 색상) 순서상관x)

• 투명도

  • opacity 0~1값
    

• 폰트

  • color(영문명,헥사코드#~~~,RGB코드(000,000,000))
  • font-size,style,family 등등
  • family(서체)-앞에서부터 적용이 가능한 순서대로 복수의 서체를 지정 가능
    브라우저 종류에 따라 지원되는 폰트가 있기 때문에 사용하며,
    항상 마지막은 sans-serif(모든브라우저에서사용가능)
  • https://fonts.google.com/ 구글 폰트사용하기
    사용하고자하는 링크코드를 html css link태그 위에 복붙후 css에 서체코드 사용
  • font-weight 굵기
  • text-decoration 밑줄 underline, line-through등 속성값

• 글자의 위치,정렬

  • text-align 태그의 영역안에서 움직인다

• 리스트스타일

  • list-style
    a태그의 밑줄처럼 기본속성값으로 가지는것들 none으로 없앨수 있다.

7. CSS 에서 공간안에 이미지 넣기

• backgroud-image

  • 공간보다 이미지가 작으면 반복되어 나타나며 repeat속성으로 조절가능
  • position속성으로 위치 조절 가능

• img 태그(html), background-img(CSS) 뭐가 좋냐?

  • img 태그 : 비율이 깨지더라도 잘리지 않는다.
  • background-img : 액자의 크기 바뀌더라도 액자 안의 사진은 그대로이다.
  • 정보를 가진 이미지 : 웹사이트의 로고처럼 정보를 가지고 있는 이미지는 alt속성을 추가한 img 태그로해야한다.(웹 접근성의 문제)
  • 데코레이션 용도 이미지 : background-img

어려웠던 내용

• 캐스케이딩 개념이 제일 중요하면서 어려운 내용인 것 같다.
  내용이 길어질수록 설계 초반에 틀을 확실히 잡아야하는 부분이라 생각한다.

해결방법

• 많은 예시를 찾아보고 적절한 상황에 알맞게 적용하는 능력을 키워야겠다.

소감

• 허전하던 예시 페이지가 점점 변화되어가는 모습을 보면서 앞으로의 진도가 기대가 되는 한편,
  이러한 개념들을 알맞게 적용시키기 위해서는 경험이 굉장히 중요한 분야인것을 느꼈다.