CSS 왕초보 탈출하기
-
css 왕초보 탈출하기 06 clear 속성, 테크닉CSS 왕초보 탈출하기 2020. 5. 5. 23:34
css 왕초보 탈출하기 06 clear 속성, 테크닉 약간의 복습 이 화면의 문제는 무엇인가? ul과 li는 기본적으로 block레벨이다. 블록속성에 대해서 모르겠다면 아래 참고. ※ 어떤 분이 제보 주신결과 li는 block레벨 요소이긴 하나, display:list-item 이라는 속성이라고 합니다. 자세한 내용은 아래 내용을 참고해주세요. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style list-style The list-style CSS property is a shorthand to set list style properties list-style-type, list-style-image, and list-style-position. d..
-
CSS 왕초보 탈출하기 05 - float 속성(3/3) clear:both 레이아웃 무너지지 않게 하기CSS 왕초보 탈출하기 2020. 5. 4. 01:03
CSS 왕초보 탈출하기 05 - float 속성(3/3) 레이아웃 무너지지 않게 하기 기본적으로 플룻 속성은 자신의 너비 외에 남는 공간이 생기면, 다음 컨텐츠 (해당 예제로는 p)가 위치하게(흐르게) 되어있다. 그래서 p가 블록속성임에도 불구하고, img-area 옆으로 흐르는 것을 볼 수 있다. 으어.. p 올라오지마.... 올라오지마..! 너 블록 속성이자나..! 블록 속성은 한줄 다 차지한다며 ㅠㅠ clear:both 속성이 뭔가요?? 문제 상황부터 볼게요. 위와 같은 html구조가 있고, p에게 float을 적용했다고 가정해보겠습니다. p는 가로(width:100px) 세로(height:100px;)값을 가졌다고 해보겠습니다. clear되지 않은 상태에서 p를 감싸고 있는 div의 높이값은 얼마..
-
CSS 왕초보 탈출하기 05 - float 속성(2/3) block속성에 float을 ??CSS 왕초보 탈출하기 2020. 5. 1. 21:59
CSS 왕초보 탈출하기 05 - float 속성(2/3) block속성에 float을 ?? block 속성에 float을 주면 어떻게 될까? 일단 다시 한번 block 속성에 대해서 정리를 하고 오는 것을 추천한다. CSS 왕초보 탈출하기 02 - block 속성 (1/2) 여느때와 같이 출근을 위해 지하철을 탓다. 문이 열리고 맞은편엔 의자가 보이는데 이상하게도 한 사람만 앉아있다. 의자 가운대에 한사람만 앉아있다. 어 ? 뭐지? 잠이 덜깻나? 멍한 정신을 차리고 다시보았다... moriandtsuki.tistory.com 다녀오셧나여? width:100px; width:100px; block요소에 float속성을 적용하면 자기 너비만큼의 값을 가지게 되며(float적용 전과 동일) 한줄을 모두 차지 ..
-
CSS 왕초보 탈출하기 05 - float 속성 (1/3) what the....f..CSS 왕초보 탈출하기 2020. 4. 30. 23:37
CSS 왕초보 탈출하기 05 - float 속성 (1/3) what the....f.. float 속성이란 무엇일까? 사전적 의미로 띄우다. 부유하다. 라는 의미를 가지고 있다. float: left 해당 요소를 좌측으로 띄운다. float: right 해당 요소를 오른쪽으로 띄운다. float: none 해당요소를 float 적용을 해제한다. float: inherit 부모요소에서 상속 받는다. 띄운다는게 뭐야??? 이미지를 어떻게 띄워서 택스트와 함께 배치할 것인가? 그럼P태그 내부 택스트 중간에 float요소가 위치하면 어떻게 될까??? 신문같은 거 보면, 우측이나 좌측에 그림이 있고 그 옆에 텍스트들이 이미지 옆으로 있는데 그걸 생각하면 쉽다. (애초에 그걸 위해 나온 속성이기도 함) 약간 예쁘게..
-
css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,rightCSS 왕초보 탈출하기 2020. 4. 30. 00:24
css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,right 지난시간 정리: position:absolute가 걸린 자식요소는 위치한다. 어디에? 해당 자식을 감싸고 있는 position:relative가 걸린 부모요소에 (바로 위에 가까운 직계 부모요소에 relative가 없다면, 그다음 감싸고 있는 부모요소, 그것도 없으면 그 다음 부모요소를 기준으로 위치한다. ) 그렇다면 position:absolute가 걸린 속성에 top, bottom, left, right 속성을 부여하면 어떻게 될까? .father{positon:relative;} .child{position:absolute; top:20px;} .child는 father를 기준으로 20px이동한다. 그..
-
css 왕초보 탈출하기 04 - Position (1/2): 부모님의 안부를 물어보다 (?)CSS 왕초보 탈출하기 2020. 4. 28. 00:17
css 왕초보 탈출하기 04 - Position : 부모님의 안부를 물어보다 (?) position은 일단 두가지만 기억하자. 두가지만 기억하게 설명할 것이다. 나머진 알아서 하자. 어렵게 절대위치 상대위치로 설명하지 않겠다. 아버님을 찾는 안부 메시지를 기억하라. 엡솔이라는 아기가 있다. 이 아이는 어느 집에서 자랄까? 엡솔이 부모 집에서 자랄 것이다. 만약, 엡솔이 부모님이 불의의 사고로 돌아가셧다면? 조부모님 집에서 자랄 것이다. 조부모님이 없다면? 사회가 맡아 고아원에서라도 자랄 것이다. relative : 렐러티브 (부모) absolute : 엡솔루트(자식) 아래와 같은 코드 구조라고 했을 떄 아래 그림을 보자. (아래 그림 모두 html구조는 동일하다.) 나에게 position:absolute..
-
CSS 왕초보 탈출하기 03 - inline속성CSS 왕초보 탈출하기 2020. 4. 26. 16:23
CSS 왕초보 탈출하기 03 - inline속성 인라인 속성이란 무엇일까? 한 라인에서 차곡차곡 쌓이는 성질이라고 할 수 있다. 우리가 워드나 한글 문서, 메모장 등을 작성할 때, 줄의 너비 안에서 타이핑 하는만큼 문자가 길어지게되는데 그렇게 생각하면 편하다. 또한, 문장의 길이가 길어져, 줄의 너비를 넘어서게되면 아래줄로 자연스럽게 줄바꿈(개행)이 되는데, 인라인도 그와 같다. 먼저 block속성을 이야기한 이유는? inline속성의 개념은 이미 우리가 아래아한글, 워드, 메모장 등에서 너무나도 일상적으로 접하고 있었던 개념이기 때문이다. 하지만 다시 한번 확인해보는 의미로 아래 내용을 보자. 지난번 블록속성시간을 다시 생각해보자. 1px인 블록속성이라고 하더라도, 한줄을 모두 차지한다고 했었다. di..
-
CSS 왕초보 탈출하기 02 - block속성 (2/2) : 레이아웃에서 블록CSS 왕초보 탈출하기 2020. 4. 25. 23:14
CSS 왕초보 탈출하기 02 - block속성 (2/2) : 레이아웃에서 블록 레이아웃에서 block속성은 어떻게 쓰일까? 1.block속성은 기본 width 값이 100퍼센트이다. (여기서 100퍼센트란 부모의 width를 기준으로 한다.) ※ width: 100px; 가로의 너비가 100px이라는 뜻. 2.만약 block속성에 유한한 width값으로 100px을 넣었다면, 100퍼센트가 아닌, 100px로 바뀌게 된다. 그렇다면. 문제를 내겠다. mom의 width가 1200px이라고 해보자. boy 1,2에게 width, height 각각 100px의 값을 주었다. 그렇다면 boy2는 boy1옆으로 위치할까? 아니면 아래에 위치할까?? 정답은 2번이다. 왜???? 가로 세로 100px 값을 지정해서..