WeCode 7기로 수업을 받고있는 슈퍼개발자,

춤추는망고입니다.

( 춤 안춥니다. )

- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.

( 코딩나라에서 살아남기 정도로 보시면 됩니다. )





WeCode 의 다섯째날인 오늘,

제가 정리할 내용은 !

웹개발이라는 된장국의 간을 맞추는 방법인,

CSS 입니다.



이번 글에선,

지난 글에서 CSS 의 쓸모를 맛본 뉴비가 드디어,

'뭐야? 저기 더 멋있는게 있잖아! 어떻게 한거지?'

라는 생각다운 생각을 갖고있을때,
개발자의 길로 한걸음 더 나아가는데 도움이 되는 내용을 소개합니다.


지난글까지는 보여주는 것을 만드는 것에 집중했다면,


이번글에선 '어떤식으로 보여줄 수 있을까?' 입니다.

( 이 계단을 넘어서면, 새로운 세상과 함께할 수 있습니다! )


이번 글은 '멋진 디자인은 익숙한 것으로부터 온다.' 에 대한 내용입니다.
-> 갑자기 진지충이라 ㅎㅎ. ㅋㅋ; ㅈㅅ








서론이 길었네요.



CSS 를 이만큼 이해하고 계시다는 것은

여러분이 이제 '비유는 필요없는 상태'가 된 것이라고 생각합니다.



어색하게 왜 이러나구요?




이 한발짝을 넘어서서, 새로운것을 맞이할때부턴,

한명의 개발자로써 여러분이 서있게 될 것이기 때문이죠.
( 머리가 터지실거란 얘깁니다 ㅋ )






오늘은 갈 길이 좀 멀어서, 설명이 부족할 수 있습니다.

여러분이 배우신 뒤에, 구글이란 친구와 함께 하셔야합니다.



첫번째 토픽부터 시작하겠습니다!


앞으로 다른 언어들에 대한 정리가 이루어지면,

그 언어들은 모두 아래와 같은 더 효율적인 방식을 채택하게 된답니다.

"모듈화"

라는 개념은 더 뒤에서 정리할 예정이지만, 궁금하면 구글링 먼저 !

HTML 에서 CSS 파일참조 사용하기 ( 모듈화 )

<link rel = “stylesheet” href = css 문서파일 >

이 link 태그는 사실, HTML 의 태그 중 하나인데요.

CSS 라는 세상을 알게되신 뒤에 나오는게,

더 맞는 것 같아서 지금에서야 소개합니다 ㅎ


link 라는 태그는 요정도 느낌으로만 기억하셔도 된다고 생각합니다.ㅎ


2. ' rel ' 이라는 속성에 값이 ' stylesheet ' 가 들어가있군요.

' rel ' 이라는 속성은 ' relation / 관계 ' 의 줄임말인데요,

우리가 다른사람을 마주할때,
어떤 관계의 사람이냐에 따라서, 다른 태도를 취하는 것처럼

HTML 문서와 다른 파일을 연결해줄때, 그 둘의 관계를 정해주는겁니다.


3. 참조속성인 'href' 에는 'css 문서파일' 이 들어있군요?

우리가 HTML 에서 ' a ' 태그와 함께봤던 이 속성은,

" 현재 위치부터 값으로 온 내용까지의 경로 " 를 지정해주는 속성입니다.

다른 폴더에 있어도, 다른 사이트에 있어도 가져올 수 있어요.
( 파일경로 표현법은 나중에 다룰 것이니, 급하다면 구글링을 통해서! )


이해되셨다면 넘어오세요!


두번째 토픽입니다!

기능과 구성내용의 가시성.

개발자라면 마땅히 추구해야할 핵심가치입니다.

웹 위에서, 그 둘의 조화.

요소들의 배치와 구조화에 익숙한 당신을 위한 체계화 지침서 !

레이아웃을 배워보세요!

핵심 키워드 : 헤더, 네비게이션, 섹션, 어사이드 ( 사이드바 ) , 풋터

( 개념설명은 없습니다. )

실습자료 ( 레이아웃 이론과 구현과정 )
-> https://poiemaweb.com/css3-layout

직접 코드를 따라쳐보시고,

  1. 어떤부분을 건드렸을때, 어떤부분이 바뀌었는지,
  2. 내가 처음보는 속성은 무엇인지,
  3. 배워서 알고있던 내용이랑 다른점이 무엇인지

    위의 세가지에 대해서 정리하는 것 까지 하신다면,
    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("자바스크립트가 다가옵니다!")
}



고생하셨습니다.


감사합니다. ( _ _)




부록

아무리 디지털 시대라 하더라도, 아날로그는 영원하다.

여러 요소속에서 문서의 내용을 더욱 돋보이게 해주고 싶다면 !

칼럼 이용하기!

↓ 이런식으로 내용 구성 가능! / 신문같은 느낌

-> http://ko.learnlayout.com/column.html

profile
지금까지 이런 망고는 없었다. 이것은 개발자인가 춤추는망고인가

0개의 댓글