안녕하세요! 오랜만에 돌아온 현이 입니다!.
블로그 운영을 한동안 진행하지 못한점 매우 죄송하게 생각하고 있습니다(꾸벅)*꾸벅...ㅠㅜ
한동안 시험기간 및 따로 진행중인 프로젝트로 인해서 이렇게 오랜만에 다시 돌아와 글을 쓰게 되었습니다!
이번에 제가 진행할 부분은... 바로 HTML 구조를 아름답게 꾸며줄 CSS를 공부를 할 예정입니다.
이전에 한달전 쯤인가..? 가짜사나이라는 웹 사이트를 HTML로 만들어서 소개드린적이 있습니다.
뭐.. 나름 만족은하긴 했지만 굉장히 예쁜느낌은 들지 않는다..? 그런 생각이 많이 들었습니다. 바로 그러한 부족한 부분을 아름답게 꾸며줄 마크업 언어가 바로 CSS 라는 것입니다.
==> 그래서 오늘부터는 바로 CSS 수업을 들어가겠습니다.
(참고로 이 수업은 HTML과 인터넷에대한 수업의 사전지식이 어느정도 있으셔야 이해하실때에도 편하실것입니다!)
1. CSS의 등장 배경: HTML의 등장과 함께 많은 웹개발자들은 HTML언어로 웹을 개발을 했다. 하지만 시간이 지날수록 웹에 외적인 부분에 불만을 느끼었고 그래서 이러한 문제점들을 해결하고자 나온것이 바로 CSS라는 언어이다.
2. CSS의 등장
- CSS는 HTML과 완전히 다른 언어.
- CSS를 사용할때에는 HTML의 언어로 CSS언어를 사용한다는것을 알려주어야 한다.
- HTML코드의 인라인라인 안에 사용할경우 <head>태그안에 <style> [___내용물___] </style> 에 작성을해서 사용을 해야한다.
- CSS 왜 쓸까? HTML에 바로 사용해서 적용이되게 하는 방법도 물론 있다. 하지만 이러한 코드들이 10~100줄이면 수작업으로 시간이 걸리더라고 수정을 하겠지만 만약 코드의 줄이 1억개라면?? 하나하나 고치기에 불가능하다고 본다. 이러한 문제를 순식간에 해결하는것이 바로 CSS이다.
3. CSS의 기본문법
* CSS를 사용하는 방법 2가지
- 인라인코드 내에서 <style></style>를 통해서 사용하는 방법(효과를 지정한후에 구분을 지어주기위해 세미콜론 ';' 을 붙여주자.)
==>>속성, 선언등의 구분을 알고 이해하도록 하자!!
- HTML의 속성인 <style>를 사용하는 방법
4. 여러 효과들은 검색을 해서 찾는 힘이 중요하다.(추가 기능들에 대해서는 따로 다루지 않겠습니다.)
5. class, id
- class: class의 값을 지정해주기 위해서는 class의 값앞에 .(class의 값) 으로 작성을 해준다.
- id: class의 값을 사용하는것 대신 id를 사용하면 id는 태그마다 단 하나만 사용을 할수있기에 단일속성으로서 역할을 해줌
*비교
- 태그/ class/ id 의 선택자가 있을경우에는 id > class > 태그 순으로 속성의 힘이 강한것을 알수있음
- class 선택자로 모두가 지정되어 있을때는 마지막에 나온 class 선택자가 태그에 적용을 해줌.
6. 박스모델
- border(-width/color/style 등..)
- display(inline/block 등..): inline은 태그의 크기만큼을 지정해주는것이고 block는 요소를 block처럼 보여주는 것.
7. 미디어 쿼리
- 반응형 웹, 반응형 디자인: 화면의 크기에 따라서 웹페이지의 화면들이 달라지는것을 의미함.
- 이러한 것을 구현할때 핵심적인 기능이 바로 미디어 쿼리
- 우선 화면의 크기를 개발자 도구를 통해서 알아낸 후 미디어 쿼리를 선언하여 개발자가 원하는 크기의 값을 지정한 후에 그 안에 조건을 삽입한다.
ex)
@media(가로 세로 조건: size값)
{
내용
}
8. 코드의 재사용
- 중복의 제거가 일의 효율성을 높인다.
- 파일을 별도로 저장후 외부에서 가져오는것이 속도를 높일수 있음
9. 마무리
- 앞으로 많이 공부하고 알아가야한다. 우선은 지금껏 배운것을 토대로 실질적으로 써먹어야하며 이런것들을 실질적으로 사용하면 공부의 효용이 더욱 높아진다.
'community > 생활코딩(HTML,CSS,JS)' 카테고리의 다른 글
| 생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.6 (0) | 2020.12.04 |
|---|---|
| 생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.5 (0) | 2020.11.23 |
| 생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.3 (0) | 2020.09.29 |
| 생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.2/+캡스톤디자인 이야기 (0) | 2020.09.24 |
| 생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.1 (2) | 2020.09.19 |