학습한 내용
html 디자인 적용 방법
- head 태그 안 style태그
css는 중괄호안에 적용해야함
color css속성 red; 속성값
css 속성값을 입력하면 마지막에 반드시 ; 세미클론 써야함!
- tag안 스타일 속성 추가
다이렉트로 문법작성
치명적인 단점
코드 분량이 길어질 경우 (2000자 이상)
html +css 언어 혼재 가독성이 떨어짐
나중에 유지보수하는 데에 있어 어려움을 겪게 될 가능성 有
html은 html 안 css은 css 에 나눠서 작성하자!
html에서 css 파일 가져올때 링크 태그를 사용함
stylesheet 타입 href 경로
test/css 문자가 css파일로
변동사항이 있을 경우 두 파일 따로따로 저장 해야함!
css 주석 처리 /* */
- 주석 안에는 주석을 넣을 수 없음! (html도 마찬가지)
css의 부모 자식관계
- 부모가 컬러라는 유전자 있다면 자식들에게 영향을 줄 수 있음
header 안에 있는 자식들에게 영향을 줌- 단 내가(자식) 가지고 있는 속성값(유전자)가 부모보다 더 친숙하기 때문에
속성값을 설정했을 경우 부모가 준 영향은 받지 않음- 부모가 가지고 있는 모든 것을 자식 모두가 다 가지지 않음
일부만 영향을 받음- a태그는 태생적으로 블루 컬러를 가지고 있음
부모가 가지고 있는 유전자의 영향을 받지 않음
- cssdptj 자식 앞에 부모를 적어주면
각각 다르게 색상변경 할 수 있고, 쉼표를 사용하면 같은 속성과 속성값을 넣을 수 있음
효율적으로 디자인 가능
선택자
css가 html에 접근하는방식
1. 타입선택자
태그를 선택하여
2. 아이디 선택자
태그에 고유의 이름을 붙일 수 있음
#test1
3.클래스 선택자
태그에 별명을 붙이는 것
.test
4.속성 선택자(attribute)
input type
📢 id,class 차이점
아이디(이름) - 하나의 속성값만 사용가능
여러 값을 낼 경우 오류로 인식
문서 안에서 속성값이 하나만 있어야함!
클래스(병멸) - 한사람당 여러개 가질수 있음
클래스의 이름으로 여러 값을 정할 수 있음
만들어진 별명을 다시 재사용할 수 있음
캐스/캐딩 우선순위
- 우선순위
style > id > class > tag
_ 동일한 선택자를 했을 경우
나중에 작성한 속성값이 적용됨
_ tag와 class - 클래스 속성값이 적용됨
_ id class의 경우 - 아이디 속성값이 적용됨
css 속성
- 공간의 크기 설정
width 가로폭 height 세로폭
공간을 만들었을 때 영역은 투명으로 잡혀서 눈으로 보이지 않음
-> background color 속성을 주고 확인하기!- 가변값을 주고 싶을때
브라우저에 따라 공간의 크기가 유동적으로 바뀜
단위를 px -> % 표시
부모를 기준으로 영향을 받음(부모 크기의 안에서 움직임)
min-width 최소
max-width 최대
min-height
max-height
퍼센트를 적용한 width height사용
상한선을 정하는 것
border 테두리
solid 선의 종류
border-radius 테두리 라운더리
폰트의 영향을 미치는 속성
font color #
rgb
font size
font style
font family 복수의 폰트 설정
앞에서부터 브라우저에서 사용가능한 폰트가 설정
마지막은 sans-serif로 한다 모든 브라우저에서 사용가능
font-weight
text-decoration underline(텍스트 밑줄) line-through(텍스트중간 줄 생성)
a태그에서 언더바를 없애고 싶을때
text-decoration none 하면 깔끔
text-align 글자 위치 정렬
left center right
범위를 보려몀 background 컬러 설정해서 보면 됨
list-style
ul가 원래 가지고 있는 설정을 없앨 수 잇음
opacity 투명도 설정
백그라운드 설정
background-image url로 설정하면 이미지를 불러올 수 있음
background-repeat 이미지를 반복적으로 배치
repeat-x repeat-y repeat
no-repeat 반복효과 x 하나만 출력
background-position 이미지 위치 정렬
img src와 background 차이점
속성값이 이미지 비해 작을 때
- 백그라운드에서는 잘리지만 (액자틀같은 느낌)
- img에서는 비율만 줄어들뿐 잘리지는 않음
언제 써야하나?
- background 데코레이션 용도
- img 정보성 이미지 일 경우 웹접근성을 위해 alt 태그에 정보써야함!
ex> < img src ="#", alt = "무슨무슨 로고 >
📌 코드작성 click!
코드는 깃허브 링크를 통하여 올림
학습한 내용 중 어려웠던 점
- background에 color도 넣고 image도 넣었는데 결과에 둘 다 나타나지 않아서 당황스러웠다.
해결방법
- 한 10분 정도 고민했는데 알고보니 ; (세미클론) 를 안적었던 것이었다...ㅎㅎ
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;
- 이것은 나의 머쓱함과 세미클론을 잊지말자는 강한 의지를 나타낸 것
안적으면 죽음(?)뿐이라는 마음으로 유심히 봐야겠따... - 눈이 침침한가보다... 루테인 잘 챙겨먹어야겠다...
학습소감
-
포토샵 속성이랑 비슷해서 어렵기보단 재미있었다.
하지만 주의해야할 점, 고려해야할 점(웹접근성)을 생각하니 헷갈리고,
정확한 태그를 쓸 수 있을까에 대한 걱정이 생긴다. -
근데 뭐 해야지 뭐... 연습해야지..
