WeCode 7기로 수업을 받고있는 슈퍼개발자,
춤추는망고입니다.
( 춤 안춥니다. )
- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.
( 코딩나라에서 살아남기 정도로 보시면 됩니다. )
WeCode 의 셋째날인 오늘,
제가 정리할 내용은 !
웹개발이라는 된장국의 간을 맞추는 방법인,
CSS 입니다.
이번 글에선,
지난 글에서 CSS 라는 수박의 껍질만을 핥았던 뉴비가
'뭐야? 그냥 색칠놀이나 블록쌓기 아니야?'
라는 말도 안되는 느낌을 갖고있을때,
꿀밤을 맛깔나게 때려주는 CSS 라는 녀석을 조금 더 소개합니다.
지난글에서 양념뿌리기 준비하는 법을 배웠다면
이번글은 음식 플레이팅과 상차리기입니다.
( 집 인테리어하는 느낌? )
이번 글은 '보기 좋은떡은 어떻게 둬야 더 맛있나'에 대한 내용입니다.
-> 같은 값이면 다홍치마입니다. 이쁘게 인테리어하라 이 말입니다.
( 집 말고, 웹문서에서요. )
서론이 길었네요.
CSS 로 웹 문서의 구조를 다루게 되었다는 것은.
여러분이 인테리어 전문가가 된 것과 같다고 생각합니다.
연봉 1억넘는 인테리어 전문가가 되고 싶다구요?
인테리어를 시작하려면, 계획부터 세워야 하는법.
일단, CSS 라는 제멋대로인 이녀석이,
내가 쓴 내용을 어떤식으로 이해하고 있는지에 대해서 알아야 할겁니다.
( 이거는 이렇게 못놓네?;; 이런겁니다. 대단한거 없어요 )
컨텐츠와 경계
여기서 눈여겨 보실건,
우리가 웹문서에 넣은 내용은 저렇게 껍질같은게 있구나...
정도입니다. 옆에 내용은 나중에 보시면 쓸모 있으실겁니다.
padding : 컨텐츠 - 경계
margin : 경계 - 전체 / auto로 설정하면, 가로 중앙에 배치 가능
border : 경계선 / " border : 두께 선모양 색 ; " 으로 지정 가능
-> 지정할때 값은 1개 , 2개 ( 상하, 좌우 ) , 4개 ( 상,우,하,좌 ) 중 하나로 입력
box-sizing : border-box ;
- 테두리(border)를 기준으로 박스의 크기를 정합니다.
- 이거 모르면, margin 과 padding 때문에 고생 좀 할겁니다.ㅋ
https://tutorialehtml.com/assets_tutorials/img/boxmodel.gif
위 이미지를 참고하세요.
( 힘든거 참고, 그냥 하시라구요 )
inline 과 block
인라인스케이트? 레고블록?
죄송합니다.
이번에 보실 내용은
'우리가 웹문서에 넣은 내용을 컴퓨터는 어떤모양으로 알고있을까?'
가 핵심입니다.
물건을 쌓듯이 정리할지, 여기저기 퍼뜨려서 놓을지를
어떤 근거로 정할 수 있는지 알아봅시다.
( 꿀팁 : ' inline 은 틈새라면, block 은 천장 ' 으로 이해하시면 편합니다. )
인라인 ( inline )
틈새라면은 여기저기 틈새에 섞여들어가기 좋겠죠?
inline 속성을 가진 내용은
내용들 사이 ( 틈새 ) 에 섞여들어갈 수 있습니다.
블록 ( block )
천장은 물건들 틈새에 들어가긴 커녕 깔고 뭉개버리잖아요?
block 속성을 가진 내용은
내용들을 깔고 뭉개거나 윗층 밑에 깔려서,
왼쪽 오른쪽에 다른 내용들이 올 수 없습니다.
나중에...
멀지 않은 그 때...
inline 요소와 block 요소의 위치랑 모양을 바꾸고 싶어졌을때,
' 어디가 문제여서 안되는거야!! '
하는 상황이 올겁니다.
그때 덜 고통받고싶다면, 대충 느낌이라도 갖고 있어야됩니다.
위치 지정과 구도
요소의 배치적인 특징들을 이용하는 방법!
display 속성
- 요소를 어떤식으로 정리할지 정해준다.
- inline, block, grid, none 등의 값을 넣을 수 있다.
( grid : 문서 전체를 표처럼 분할 / 단위 : px, fr 등 )
-> 그리드는 더 좋은기술이 있어, 자세히 다루지는 않겠습니다.
- block 요소는
' display ' 와 ' float ' property 를 이용해서
inline 요소처럼 배치할 수 있다.
- inline 요소는
' display ' property 를 이용해서
block 요소의 속성을 지니게 할 수 있다.
- none 요소는 숨김기능이다.
-----------------------------------------------------
float 속성
- 진짜 말그대로 붕~ 띄워버린다;;
- left, right, none 등의 값을 넣을 수 있다.
- 부모요소가 높이를 인지하지 못해
자식요소가 부모요소에서 튀어나가는 경우가 있음.
해결방법1.
부모요소 마지막에 아무태그나 넣고, clear 속성을 적용합니다.
( 단점 : HTML코드를 더 입력해야 함 )
해결방법2.
부모요소에 overflow: hidden; 을 줍니다.
( 주로 많이 사용하는 방법 )
해결방법3.
부모요소를 float 시킵니다.
그러면 자식의 float 높이를 인지하여
그만큼 높이를 차지하게 됩니다.
( float이 되어, block 요소의 성질이 없어짐,
-> 이러면 width를 100% 추가해야함.
-----------------------------------------------------
position 속성
- 아 모르겠고, 그냥 딱 여기에 둘래!
relative : 원래 위치에서 이동
absolute : 부모요소에 대한 절대위치를 지정
-> inline 요소처럼 내용의 크기만큼만 범위가 됨
fixed : 부모요소에 상관없는 절대위치를 지정
-> 눈에 보이는 브라우저 화면 내에서만 움직임
모르겠다구요?
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
힘내십쇼~ ㅋ.
오늘 내용은 외우거나 이해하기 힘드실겁니다.
충분히 많은 내용이 들어가있고,
그 내용들마다의 핵심들이 비슷한듯, 다르기 때문입니다.
지금은 병뚜껑으로 항공모함을 만드는 기분이시겠지만,
언젠가의 여러분은 위의 내용들을 잘 이해하셔서
웹사이트 구성하기를 어린이용 레고맞추기 정도로 생각하시게 될겁니다.
대충 ' 내가 웹 요소를 배치할때 이런 조건들이 있구나 ' 하는 느낌정도만 가지셔도,
앞으로 배우는 내용들을 받아들이실때 매우 도움이 되실겁니다.
물론 ! CSS 를 통해서 많은 것들을 시도해보시면,
이러한 내용들을 알고 있어야 해결 가능한 문제들도 생긴답니다.
아 ㅋ 물론 엄청 힘들걸요? ㅋ
약올리는거 아닙니다.
일단 오늘 내용은 언젠가의 문제가 찾아왔을때 다시 봐주시길 바랍니다.
답은 항상 가까이 있다고 합니다.
언젠가 찾아올 문제에 대한 해답은
쓸모없어보였던 녀석이 갖고있을지 모른다 이 말입니다.
고생하셨습니다.
감사합니다. ( _ _)
부록
알도쓸잡 ( 알아두면 도움이 되나? 쓸모는 있는 잡것들 )
div 와 span 이라는 아주 좋은 수납상자를 소개해드렸죠?
div 는 기본적으로 block 요소이기 때문에,
주로 크기가 크고 많은 내용들을 담기에 좋습니다.
span 은 기본적으로 inline 요소이기 때문에,
문장 내의 아주 작은 부분을 담아두기에 좋습니다.
물론, 사용하기 나름입니다. (ㅎ _ㅎ)7