WeCode 7기로 수업을 받고있는 슈퍼개발자,
춤추는망고입니다.
( 춤 안춥니다. )
- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.
( 코딩나라에서 살아남기 정도로 보시면 됩니다. )
WeCode 의 다섯째날인 오늘,
제가 정리할 내용은 !
웹개발이라는 된장국의 간을 맞추는 방법인,
CSS 입니다.
이번 글에선,
지난 글에서 CSS 의 쓸모를 맛본 뉴비가 드디어,
'뭐야? 저기 더 멋있는게 있잖아! 어떻게 한거지?'
라는 생각다운 생각을 갖고있을때,
개발자의 길로 한걸음 더 나아가는데 도움이 되는 내용을 소개합니다.
지난글까지는 보여주는 것을 만드는 것에 집중했다면,
이번글에선 '어떤식으로 보여줄 수 있을까?' 입니다.
( 이 계단을 넘어서면, 새로운 세상과 함께할 수 있습니다! )
이번 글은 '멋진 디자인은 익숙한 것으로부터 온다.' 에 대한 내용입니다.
-> 갑자기 진지충이라 ㅎㅎ. ㅋㅋ; ㅈㅅ
서론이 길었네요.
CSS 를 이만큼 이해하고 계시다는 것은
여러분이 이제 '비유는 필요없는 상태'가 된 것이라고 생각합니다.
어색하게 왜 이러나구요?
이 한발짝을 넘어서서, 새로운것을 맞이할때부턴,
한명의 개발자로써 여러분이 서있게 될 것이기 때문이죠.
( 머리가 터지실거란 얘깁니다 ㅋ )
오늘은 갈 길이 좀 멀어서, 설명이 부족할 수 있습니다.
여러분이 배우신 뒤에, 구글이란 친구와 함께 하셔야합니다.
첫번째 토픽부터 시작하겠습니다!
앞으로 다른 언어들에 대한 정리가 이루어지면,
그 언어들은 모두 아래와 같은 더 효율적인 방식을 채택하게 된답니다.
"모듈화"
라는 개념은 더 뒤에서 정리할 예정이지만, 궁금하면 구글링 먼저 !
HTML 에서 CSS 파일참조 사용하기 ( 모듈화 )
<link rel = “stylesheet” href = “ css 문서파일 ”>이 link 태그는 사실, HTML 의 태그 중 하나인데요.
CSS 라는 세상을 알게되신 뒤에 나오는게,
더 맞는 것 같아서 지금에서야 소개합니다 ㅎ
1. link 라는 태그는, 그 뜻 그대로 연결한다는 뜻이죠.
link 라는 태그는 요정도 느낌으로만 기억하셔도 된다고 생각합니다.ㅎ
2. ' rel ' 이라는 속성에 값이 ' stylesheet ' 가 들어가있군요.
' rel ' 이라는 속성은 ' relation / 관계 ' 의 줄임말인데요,
우리가 다른사람을 마주할때,
어떤 관계의 사람이냐에 따라서, 다른 태도를 취하는 것처럼
HTML 문서와 다른 파일을 연결해줄때, 그 둘의 관계를 정해주는겁니다.
3. 참조속성인 'href' 에는 'css 문서파일' 이 들어있군요?
우리가 HTML 에서 ' a ' 태그와 함께봤던 이 속성은,
" 현재 위치부터 값으로 온 내용까지의 경로 " 를 지정해주는 속성입니다.
다른 폴더에 있어도, 다른 사이트에 있어도 가져올 수 있어요.
( 파일경로 표현법은 나중에 다룰 것이니, 급하다면 구글링을 통해서! )
이해되셨다면 넘어오세요!
두번째 토픽입니다!
기능과 구성내용의 가시성.
개발자라면 마땅히 추구해야할 핵심가치입니다.
웹 위에서, 그 둘의 조화.
요소들의 배치와 구조화에 익숙한 당신을 위한 체계화 지침서 !
레이아웃을 배워보세요!
핵심 키워드 : 헤더, 네비게이션, 섹션, 어사이드 ( 사이드바 ) , 풋터
( 개념설명은 없습니다. )
실습자료 ( 레이아웃 이론과 구현과정 )
-> https://poiemaweb.com/css3-layout
직접 코드를 따라쳐보시고,
- 어떤부분을 건드렸을때, 어떤부분이 바뀌었는지,
- 내가 처음보는 속성은 무엇인지,
- 배워서 알고있던 내용이랑 다른점이 무엇인지
위의 세가지에 대해서 정리하는 것 까지 하신다면,
CSS 의 기본적인 레이아웃은 여러분의 것이 될겁니다!
다 해보셨다면 넘어오세요!
마지막 토픽입니다!
다양한 장치에서 웹문서를 보는 요즘 !
레이아웃으로 이쁘게 꾸민 사이트의 내용을 가장 잘 전달하려면,
그 사이트를 보고있는 사용자에게 맞춤식으로 보여줘야겠죠?
얼마나 넓게 웹사이트를 보고있던,
얼마나 좁게 웹사이트를 보고있던,
스마트폰에서 보고있던,
태블릿에서 보고있던,
노트북 / 컴퓨터에서 보고있던
지금 보실 기술은 어떤상황에도 살아움직이는 엄청난 기술입니다.
' 맞 ' 춤서비스를 제대로 ' 맛 ' 보고싶다면 !
반응형 디자인 ( Media Query )
MDN ( FireFox 브라우져 제작회사 ) 공식 설명문서
-> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
간단한 요약본을 드릴테니, 세부구성은 공식문서를 참고하세요!
예. 제가 그 간단한 요약본입니다. ( _ _)
1. 기본적인 코드
CSS 파일, 혹은 style 태그 안에 속성을 지정해주듯이 하면 됩니다.
@media only screen and ( max or min-width : px ) {
선택자 {
속성
}
}
2. scss 라는 기술을 이용해, 이런식으로 모듈화도 가능!
-> https://heropy.blog/2018/01/31/sass/ 참고
+----mediaQuery.scss----------------------------------+
| |
| $phone: "only screen and (max-width: 768px)"; |
| $desktop: "screen and (min-width: 769px)"; |
| |
+-----------------------------------------------------+
미디어쿼리는 사실 뷰포트라는 사이즈에 맞춰 디자인을 변경하는 기술인데요.
단순하게 보이는 내용은 그대로 두며, 뷰포트에 맞게 확대/축소만을 원한다면,
메타 뷰포트 ( Meta Viewport )
-> https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
가 필요하실겁니다.
어떤 원리인지 이해하셨다면 넘어오세요!
진짜 마지막 토픽입니다!
농담입니다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
끝났다 이말입니다.
여러분에게 필요할 내용들을 하나하나 설명해드리고 싶은데,
앞으로는 직접 해보고, 배우고, 익히셔야 합니다.
앞으로 어떤일을 해야할 지에 대해서 좀 잡히셨다면 좋겠네요.
위의 실습들은 직접 해보세요. 꼭!
뚝딱뚝딱... 탕! 탕!
if ( 시리즈[독자] ) {
write("자바스크립트가 다가옵니다!")
}
고생하셨습니다.
감사합니다. ( _ _)
부록
아무리 디지털 시대라 하더라도, 아날로그는 영원하다.
여러 요소속에서 문서의 내용을 더욱 돋보이게 해주고 싶다면 !
칼럼 이용하기!
↓ 이런식으로 내용 구성 가능! / 신문같은 느낌
