Just Make IT

css의 overflow를 써야할 때컨텐츠가 블록 속성이 엘리먼트 박스를 넘을 때 overflow 속성을 어떻게 할 지 고민해야 합니다. 스크롤을 생기게 하거나 또는 엘리먼트 박스를 넘은 컨텐츠를 숨길 수 있고 상황에 맞게 필요한 것을 선택해야 합니다. 일단 너비와 높이가 길이가 정해져 있어야 overflow를 정할 일이 생기기 때문에 100px씩으로 고정했습니다. 해당 코드를 실행해보시면 아래와 같은 형태가 됩니다. 왼쪽부터 visible, scroll, hidden의 값을 준 형태입니다. visible은 상자를 넘어서 나오게되고, 스크롤은 스크롤이 생기며, 히든은 최대한 표현하고 나머지는 숨기게 됩니다. 직관적으로 이해되시나요? 높이값을 주지 않으면 컨텐츠가 생성하는 높이가 증가함에 따라 엘리먼트 박..

css의 position 속성 배우기 홈페이지를 만들기 전에 우선은 css속성 중에 하나인 position에 대해서 알아야 합니다. 반응형 웹을 만들기 전에 우선 position 속성을 배워봅시다. position 속성은 사용되는 엘리먼트들의 위치를 지정할 때 사용하는 속성입니다. 각 엘리먼트들은 위치를 옮길 수 있습니다. left, right, top, bottom이라는 속성들로 말이죠. 이렇게 위치를 옮기는 것을 오프셋을 조정한다고 합니다. left, right, top, bottom 등 오프셋을 조정할 수 있는 속성에는 길이 단위(px, em 등)와 %(퍼센트)를 줄 수 있습니다. 그저 오프셋을 지정한다고 엘리먼트들이 움직이는 것은 아닙니다. 포지션 속성을 설정해줘야 지정한 오프셋에 따라 엘리먼트들..

저번 시간에는 태그를 통해서 html문서와 css문서를 연결해 보았습니다. 혹시 기억이 나지 않으면 아래의 링크들을 클릭해서 복습해주세요. 1. 네비게이션바 만들기 1 - 준비운동2. 네비게이션바 만들기 2 html문서에 내용을 채워봅시다 네비게이션 바는 보통 태그와 태그 그리고 태그로 만들어집니다. 아래의 소스코드를 html문서의 태그 안에 넣어 주세요. 호스팅하기 도움말 회원가입 로그인 파일을 실행시켜 보시면 위의 사진 같은 모양이 되어있을 겁니다. 가장 눈에 띄는 이미지 사진부터 크기를 맞춰보도록 하겠습니다. img{ width: 32px; height: 32px; } css파일에 테스트겸 적어봤던 div{color:blue;}를 지우고 위의 소스코드를 넣어주세요. 그럼 이미지의 크기가 가로 세로 ..

플렉스를 활용해서 에어비앤비의 네비게이션바를 만들어 봅시다. 1. 준비운동 다시보기 저번 시간에는 만들기 전에 미리 알아두셔야 할 것들을 설명하는 시간을 가졌습니다. 혹시 기억이 안나시면 위의 링크를 클릭해주세요! 이번 시간부터는 플렉스를 통해서 에어비앤비의 네비게이션바를 만들어 보도록 하겠습니다. 네비게이션바는 홈페이지에서 이동이 편리하도록 만들어주는 링크 목록이라고 할 수 있습니다. 에어비앤비 홈페이지에서 확인하기 우선 만들기 전에 몇 가지 분석을 해보겠습니다. 네비게이션바에는 왼쪽에 에어비앤비의 로고가 들어가 있고, 오른쪽에는 호스팅하기, 도움말, 회원가입, 로그인이라는 리스트들이 있습니다. 클릭하고 나서는 자바스크립트가 필요하니 지금은 클릭하기 전의 겉모습만 만들어볼 예정입니다. 마우스를 리스트 ..

css에서 display 속성은 무슨 역할을 할까요? 모든 엘리먼트는 사각형의 형태를 가지고 있다고 이전 시간에 배운 것이 기억나시나요? display속성은 그 사각형이 어떻게 작동될지를 정해주는 속성입니다. 태그와 태그를 비교할 때 태그는 display의 속성값이 block이고, 태그는 inline이라고 설명한 적이 있습니다. 그림을 보면서 복습하기 위의 링크를 누르시고 그때 설명했던 그림을 보시면 block과 inline이 공간을 어떻게 차지하는지 바로 확인할 수 있습니다. 그리고 그때 배우지 못했던 속성값들을 좀 더 살펴보도록 하겠습니다. display이 값에 none이라는 값을 준다면 해당 엘리먼트는 사라집니다. div-1 div-2 div-3 위의 소스코드를 태그 사이에 넣어주세요. 그리고 실행..

어떤 CSS속성들을 배워야 할까요? 모든 속성을 다 배울 필요는 없습니다. 자주 쓰이는 것들은 알아두고 혹시 필요한 기능이 있으면 그때 그때 배워나가면 됩니다. 어떤 속성들을 자주 쓰는 지 알아볼까요? 자주 사용하는 CSS 속성 확인하기 위의 링크로 들어가면 MS에서 자주 사용하는 CSS 속성들을 조사한 그래프를 볼 수 있습니다. 일단은 여기서 나오는 상위의 속성들을 우선 알아두시면 충분합니다. 오늘의 수업도 여기에 기반해 시작하도록 하겠습니다. font-size는 글씨의 크기를 조절하는 속성이고, text-align은 글씨를 정렬할 때 사용하는 속성입니다. font 16 font 32 위의 소스코드를 복사해서 실행해 주세요. 두 개의 태그가 있고, 각각에 one과 two라는 아이디를 주었습니다. #on..

선택자를 배웠으니 css를 사용하는 방법을 배워보도록 하겠습니다. css셀렉터를 적고 괄호 안에 속성과 값을 적으면 css가 적용됩니다. 속성과 값은 콜론으로 구분하고, 한 가지 효과가 끝나면 세미콜론으로 마무리합니다. 지금의 그림은 태그 전부에 배경색을 검은색으로 바꾸고, 글자색은 흰색으로 바꾼 것입니다. 정리하자면, css셀렉터 { css속성 : 값 ; } 이라는 형태가 됩니다. 그럼 css효과를 가진 문서는 어떤 형태를 가지게 될까요 ? p{ color : blue; } #first { color : red; } .second { color : green; } div span{ background-color: black; } css 문서는 위와 같은 형태가 됩니다. 한 페이지를 꾸민다는 것은 많은 ..

CSS란 무엇일까요? 이전 시간까지는 HTML에 대해서 배웠습니다. 오늘부터는 CSS에 대해서 배워보겠습니다. CSS란 도대체 무엇일까요? CSS는 HTML 문서가 어떻게 배치되고 어떤 식으로 보여질 지와 같은 스타일을 표현하는 언어입니다. HTML만으로 구성된 문서들은 아주 투박했습니다. 우리가 자주 접하는 웹사이트들도 CSS가 없다면 상상 이상으로 아주 투박했을 겁니다. 그렇게 깔끔한 네이버의 메인도 CSS가 없으니 같이 만들던 예시만큼 투박해 보이죠? 보기 좋은 떡이 먹기도 좋다는 말이 있습니다. 아무리 아주 유익한 사이트라고 해도 보기 좋게 꾸미지 않으면 사람들이 찾지 않게 되겠죠.얼른 CSS도 배워서 실전 같은 예제들을 만들어봅시다. 우선 CSS선택자를 배워봅시다. CSS 선택자란 무엇일까요 ?..