210630 개발일지 CSS
학습내용
- 웹사이트 제작에서 디자인을 담당하는 CSS의 기초
1. 디자인을 적용하는 3가지 방법
- html에서는 style속성값을 사용한다.
- css에서는 {}중괄호 안쪽에 기입
- 속성값 끝에는 ; 붙여줘야 이후의 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값
- 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으로 없앨수 있다.
- list-style
7. CSS 에서 공간안에 이미지 넣기
-
backgroud-image
- 공간보다 이미지가 작으면 반복되어 나타나며 repeat속성으로 조절가능
- position속성으로 위치 조절 가능
-
img 태그(html), background-img(CSS) 뭐가 좋냐?
- img 태그 : 비율이 깨지더라도 잘리지 않는다.
- background-img : 액자의 크기 바뀌더라도 액자 안의 사진은 그대로이다.
- 정보를 가진 이미지 : 웹사이트의 로고처럼 정보를 가지고 있는 이미지는 alt속성을 추가한 img 태그로해야한다.(웹 접근성의 문제)
- 데코레이션 용도 이미지 : background-img
어려웠던 내용
- 캐스케이딩 개념이 제일 중요하면서 어려운 내용인 것 같다.
내용이 길어질수록 설계 초반에 틀을 확실히 잡아야하는 부분이라 생각한다.
해결방법
- 많은 예시를 찾아보고 적절한 상황에 알맞게 적용하는 능력을 키워야겠다.
소감
- 허전하던 예시 페이지가 점점 변화되어가는 모습을 보면서 앞으로의 진도가 기대가 되는 한편,
이러한 개념들을 알맞게 적용시키기 위해서는 경험이 굉장히 중요한 분야인것을 느꼈다.
Author And Source
이 문제에 관하여(210630 개발일지 CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jihunkim0511/210630-개발일지-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)