[패스트캠퍼스 수강 후기] 파이썬 인강 100% 환급 챌린지 8회차 미션

 

 

 

8일차

오늘은 제주도 구좌읍 바다를 배경으로 html과 css 강의 듣는 사진을 찍었어요. 

div 요소

의미를 가지지 않은 요소.  생성된 요소를 묶는 역할, 비슷한 요소들을 묶는 역할을 하고, 마크업 문서의 가독성 향상을 위해서도 사용한다고 합니다. 

span 요소

div요소와 비슷한 역할을 하지만 두요소의 차이점은 div는 블록 요소로 줄바꿈을 하지만, span 요소는 인라인 요소로 줄바꿈을 하지 않습니다. 

그리고 div요소는 div요소안에 다른 요소들이 올수있지만 span 은 올수 없습니다. div는 요소 양옆에 다른 요소가 올수 없고 span은 올수 있습니다. 

div요소는 한줄을 모두 사용하기 때문에 가로, 세로 크기 값을 가질수 있습니다. 박스를 그린다고 할때 css로 가로, 세로 값을 주면 div요소는 그것을 표현할수 있습니다. 

하지만 반대로 span은 줄바꿈이 없는 요소이기 때문에 가로, 세로 값을 가질수 없습니다. 

두 요소는 css를 이용해서 특성을 바꿀수도 있습니다. div요소를 css에서 inline으로 속성을 정해주면 span요소처럼 줄바꿈없이 표현됩니다. 마찬가지로 span도 css에서 block으로 속성을 정해주면 줄바꿈을 표현하고, 이경우에는 박스를 그릴때 가로, 세로 값을 적용할수 있습니다. 

css에서 font, background 사용

css를 사용해서 font속성을 주는 방법을 알아봅니다. 

font family라고 작성하고 글씨체를 정해 줄수 있습니다. 글씨체는 5개까지 지정할수 있고, 마지막에는 속성을 정의해줍니다. 여러개의 글씨체를 정해주는 이유는 해당 글씨체가 없는 경우 에러를 방지 할수있습니다. 

font size를 이용해서 글자의 크기도 정해줄수 있습니다. 예를들어 15pt라고 쓰면 글자의 크기가 15사이즈가 됩니다. 이렇게 숫자로 정해 줄수도 있고 기본사이즈를 숫자로 정해준 다음 필요한 부분의 사이즈를 배율로 정해줄수도 있습니다. 예를들어 기본 사이즈 10pt라고 정해준후 강조하고 싶은 부분을 2em이라고 지정해주면 10의 2배인 20pt가 됩니다. 

주의할 점은 강조하고 싶은 부분이 중첩되어 html태그가 사용되었다면 2배의 2배가 되어 4배로 표현될수도 있다는 것입니다. 그래서 이부분은 방지하기 위해 em이 아닌 rem 코드를 사용해 줍니다. 여기서 r은 root로 가장 기본이 되는 글자 크기를 나타냅니다. 기본 글자 사이즈의 2배를 해주라는 명령입니다. 

글자의 색깔은 color코드로 나타낼수 있습니다. 색깔은 색의 이름을 쓸수도있고 rgb코드로도 쓸수있습니다. rgb코드는 검색으로 다양하게 찾을수 있고 16진수로 나타냅니다. 예를 들어 fffff 는 16진수로 쓴 흰색입니다. 00000은 16진수로 쓴 검은색입니다.  10진수로도 나타낼수도있는데 (0,0,0)으로 쓰면 검은색 (255,255,255)하면 흰색입니다. 숫자가 작을수록 검은색에 가깝고 255에 가까울수록 흰색에 가깝습니다. 

rgb값에 a 값을 더 써주면 투명도도 지정해줄수있습니다. 0에 가까우면 투명하고 1에 가까우면 불투명입니다. 

back ground color도 마찬가지로 색깔을 지정해 줄수 있습니다. 색의 이름이나 코드를 써주면 글자가 있는 부분의 배경색이 변합니다.

 

여기까지 오늘 수업 끝!

 

 

강의소개 https://bit.ly/33a7nvc