학습한 내용
태그에 디자인을 적용하는 방법
1. <head> 안쪽에 <style>을 사용해서 디자인을 적용
2. 디자인을 적용할 태그 안에 style 속성을 추가해서 css문법을 작성
3. <link>를 이용해서 html문서와 css문서를 연동- css 언어를 작성할 때에는 디자인을 적용할 태그를 선택하고 중괄호 안쪽에 기입을 해야합니다. 속성값을 입력하고 반드시 ;을 입력합니다.
Sublime Text 상단에 View - layout - columns를 누르면 여러 코드를 확인하며 작업할 수 있습니다.
/* */를 사용하면 css에서 주석 처리할 수 있습니다.
html은 태그가 다른 태그를 품는 구조가 됩니다.
선택자 : css에서 html 문서에 접근하는 방법
1. type 선택자 : html 태그를 기준으로 접근
2. id 선택자 : html 태그에 이름을 붙이고 css에서 #이름을 넣어서 접근
3. class 선택자 : thml 태그에 별명을 붙이고 css에서 .별명을 넣어서 접근
4. 속성 선택자 : html type의 속성값을 가지고 접근- id 선택자와 class 선택자는 같은 태그가 여러개 있는 경우에 서로 다른 색상을 적용하고 싶을 때 사용할 수 있습니다.
- id 선택자는 속성값을 하나만 사용해야 하고 class는 속성값을 여러개 추가 가능합니다.
- 만들어진 속성값을 class 선택자는 여기저기에 언제든 재사용 가능하지만 id 선택자는 그렇지 않습니다.
캐스케이딩 : 동일한 속성값을 적용했을 때 어느 속성값을 적용할 것인지 우선순위를 나타내는 것을 말합니다.
- type의 경우 나중에 입력된 값이 우선순위가 높습니다.
- 우선순위 -> type < class < id < style 속성
- 디테일하고 작성될수록 우선순위가 높아집니다.
- 캐스케이딩은 원본 코드를 유지한 상태에서 새로운 css코드를 추가하는 방식으로 디자인을 덮고 싶을때 사용합니다.css에서 크기 단위를 픽셀로 했을때에는 공간의 크기가 고정값이 되지만 퍼센테이지로 하게 되면 크기가 가변적으로 바뀝니다.
min-width, max-width : 퍼센테이지를 적용한 width 속성 안에서 사용됩니다.
border: solid 10px red; : 세가지의 css 속성값을 기입할 수 있습니다.(테두리: 선의종류 선의굵기 선의색상 -> 순서는 변경해도 무방)
border-radius : border 테두리 가장자리 부분에 라운드를 줄 때 사용합니다.
색상을 입력할 때 헥사코드나 RGB코드를 넣을 수 있습니다.
font-family : 폰트를 여러가지 적용하려 할 때 사용하며 입력한 순서대로 적용가능한 폰트부터 적용합니다.
text-decoration : 글자에 밑줄을 적용할 때 사용됩니다.
text-decoration: underline; : 긑자 바로 밑에 줄을 긋습니다.
text-decoration: line-through; : 글자 중앙에 줄을 긋습니다.
a 태그로 그어진 밑줄도 text-decoration: none;을 사용하면 지울 수 있습니다.
text-align : 글자 정렬을 바꿀 수 있습니다.(태그 영역 안아서 움직입니다.)
- 메뉴1
- 메뉴2
opacity : 투명도를 조절할 수 있습니다.(0 ~ 1 사이의 값)
background-repeat : 이미지의 반복효과를 바꿀 수 있습니다.
background-position : 이미지의 위치를 바꿀 수 있습니다.
img => 이미지 비율이 바뀌더라도 짤리는 현상은 나타나지 않습니다. 정보를 가지고 있는 이미지는 img 태그로 표기를 해야 합니다.
background-image => 크기가 맞는 않는 액자에 사진을 넣으면 잘려보이거나 공간이 남아보이는 것과 같은 현상이 나타납니다.
학습한 내용 중 어려웠던 점 또는 해결못한 것들
선택자 4개 중에 id와 class가 비슷해서 비슷한 것들끼리 묶여 있어서 혼란스럽기도 했고, 나머지 type과 속성을 더해서 사용했을 경우 각각의 우선순위에 따라서 상황에 맞게 사용해야 한다는 것이 머리속으로는 이해가 가는데 막상 사용했을 때에는 우선순위와 기능등을 모두 생각하면서 하는게 쉽지는 않았습니다.
해결방법 작성
선택자를 사용하는 예문을 준비하고 실제로 어느 부분을 어떻게 작업을 할지 미리 정해놓습니다. 그리고 확실하게 정해진 부분부터 우선순위를 먼저 두고, 그 다음으로 다른 부분과 정해놓은 부분의 우선순위를 바꾸는 방식으로 해야할거 같습니다.
학습 소감
확실히 css 파트를 들어가기 시작하면서 점점 꼬이고 따라가는 것이 느려지고 있는거 같습니다. 그리고 기능이 비슷하면서 조금씩 차이가 있는 것들이 나오고 있어서 더욱 복잡한거 같습니다.
