본문 바로가기

CSS41

CSS, flex-basis와 grow 그리고 shrink 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분 gogogameboy.tistory.com 지난 포스트에서는 웹사이트의 레이아웃을 잡는 플렉스 flex의 기초를 배웠습니다. 이번에는 조금 더 구체적인 내용을 공부해보겠습니다. flex-basis 1 2 3 4 5 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. .item:n.. 2021. 1. 3. 13:16
CSS 웹사이트 레이아웃 기초 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 absolute 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 gogogameboy.tistory.com 어제는 CSS의 포지션과 관련된 속성들만 세번의 포스팅을 통해 세가지를 공부해보았습니다. 오늘부터 공부해볼 주제는 플렉스 Flex입니다. 생활코딩의 강의 영상에서는 자꾸 플럭스라고 발음을 하시는데 잘못 읽으신 것 같습니다. ㅎㅎ 표를 만드는 table 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가.. 2021. 1. 3. 09:19
CSS 포지션 absolute 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 static과 relative 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 마진 겹침 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들 gogogameboy.tistory.com 지난 포스트에 이어 이번에도 CSS의 포지션과 관련된 공부를 하겠습니다. position: absolute other grand parent me 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS에 position 값을.. 2021. 1. 2. 18:33
CSS 포지션 static과 relative 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 마진 겹침 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 사이징 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분 gogogameboy.tistory.com position: relative other parent me 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS에 position 값을 따로 주지않으면 기본적으로 static으로 설정이 됩니다. position 값을 relative로 줘야 박스의.. 2021. 1. 2. 09:19
CSS 마진 겹침 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 사이징 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 모델 (padding, margin) 이 포스팅은 PC로 작성되었습니다. 모바일 gogogameboy.tistory.com 마진 margin이 겹치는 현상 Hello World Hello World 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. html css js 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 .. 2021. 1. 1. 15:41
CSS 박스 사이징 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 모델 (padding, margin) 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분 gogogameboy.tistory.com 지난 포스트의 박스 모델에 이어 이번에는 박스 사이징에 대해서 공부를 해보겠습니다. box-sizing Hello Hello 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. 태그 내의 *{ } 선택자는 이.. 2021. 1. 1. 13:03
CSS 박스 모델 (padding, margin) 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다. gogogameboy.tistory.com 웹페이지의 디자인을 담당하는 CSS에서 박스 모델은 아주 중요한 내용입니다. 아래의 생활코딩 강의 영상으로 같이 공부해봅시다. Box Model Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, numquam. Lorem ipsum dolor sit a.. 2021. 1. 1. 08:48
CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 구글 크롬 테마 변경하기 이 포스팅은 PC로 작성되었습니다. 모바일 gogogameboy.tistory.com 코드 에디터 Brackets 갑작스럽지만 코드 에디터 소개 영상을 하나 보고 가겠습니다. 생활코딩의 CSS 강의 영상 안에 위의 영상이 끼어있어서 그냥 올려봅니다. (저처럼) 쓰고있던 코드 에디터를 잘 쓰고 계시는 분에게는 필요없는 영상일수도 있지만, 어쩌면 위에서 소개하는 코드 에디터가 정말 필요한 분이 계실지도.. 2020. 12. 31. 22:03
CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 구글 크롬 테마 변경하기 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 상속 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게 gogogameboy.tistory.com 지난 포스트의 생활코딩 강의 영상에서 '캐스케이딩' 이라는 단어가 잠깐 등장했는데요, 이번에는 그 캐스케이딩을 공부해보도록 하겠습니다. cascading html css javascript style attribute id selector class selector tag selector 위의 소스 코드는 PC에서 드래그 .. 2020. 12. 31. 12:11