아이템에 넣을 수 있는 속성들을 알아봅시다. 저번 시간엔 콘테이너에 넣을 수 있는 속성들을 배웠습니다. 이번 시간에는 아이템에 넣을 수 있는 속성들을 배워봅시다. 아이템에는 직계 자식 태그만 속한다는 것을 잊지 마세요. 컨테이너 안에 5개의 상자가 있습니다. 보시면 마지막 상자는 이름은 div-4인데 마지막에 위치해 있고, 다른 것들 보다 조금 길게 만들어졌군요. 긴 것은 길이를 다르게 설정했다고 하더라도 순서도 제가 다르게 입력했을까요?아래의 소스코드를 주목해주세요. div-1 div-2 div-3 div-4 div-5 container 역할을 하는 태그 안에 상자들은 1부터 5까지 순서대로 되어있습니다. #four에 order 값이 1인 것을 주목해 주세요. order 속성을 이용하면 아이템들의 순서..
컨테이너에 넣을 수 있는 속성들을 알아봅시다. 앞 시간엔 부모 엘리먼트의 display 값에 flex를 선언한 것까지 했습니다. 컨테이너가 무엇인지 기억나시나요? 부모 엘리먼트를 앞으로 컨테이너라고 지칭하기로 했었습니다. flex를 선언하면 기본적으로는 이런 모습으로 보입니다. flex는 다른 값을 주지 않는다면 일단 한 줄안에 다 넣습니다. 그리고 가로로 아이템들을 정렬합니다. 속성으로 얘기하자면 flex-direction은 row값이 적용되어 있고, flex-wrap은 nowrap인 것이죠. flex-direction이란 무엇일까요? 말 그대로 플렉스의 방향을 정해주는 속성입니다. 플렉스에서는 기본 방향을 주축(main-axis)이라고 합니다. row는 그림처럼 나타날 것이고, column을 주면 어..
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 선택자란 무엇일까요 ?..
태그와 태그를 활용해보고 id와 class도 익혀봅시다. 오늘은 상자를 여러개 그려서 태그와 태그에 대해서 배워봅시다. 예시 사진을 보시면 아시겠지만 네모난 상자들이 여러개 있습니다. 어떤 것들은 겹쳐져 있고, 어떤 것들은 다른 것들과 떨어져 있습니다. 안 쪽의 텍스트를 보시면 태그와 태그의 큰 차이를 알 수 있습니다. 무엇인지 아시겠나요? 맞습니다. 옆 공간을 다 차지하는 것이 태그이고, 옆에 다른 컨텐츠가 올 수 있는 것이태그입니다. 우선 이 정도만 기억해두고 소스코드를 살펴보도록 합시다. id와 class값 주기 - div와 span의 차이 a태그를 이용해서 페이지 내의 특정요소로 이동 div - 1 div - 2 div - 2-1 span - 1 span - 2 div - 3 div - 4 새로운..
오늘은 태그, 태그, 를 활용해 보겠습니다. 우선 우리가 만들 것을 미리 사진으로 살펴볼까요?제목 밑에 검색창이 있고, 그 밑에 제 강의가 리스트로 나타나 있습니다. 각 리스트는 클릭하면 제목에 맞는 강의로 이동하고, 마지막엔 구글로 바로 이동할 수 있게 만들었습니다. 소스 코드는 아래와 같이 되어있습니다. 레몬캔디의 강의 검색 검색 파일 확장명 표시 HTML 입문 HTML 보충설명 HTML 속성값 바꾸기 찾으시는게 없다면 구글로 이동해서 검색해 보세요 소스코드를 보면서 하나씩 배워볼까요?우선은 태그가 나오지만, 지난 시간에 에서 태그는 이미 배웠으니 바로 태그로 넘어가겠습니다. 이전 태그들을 복습하시려면 여기를 눌러주세요. 태그는 사용자가 정보를 입력할 수 있는 입력창을 보여주는 태그입니다. 속성에 타..
이전에 배웠던 코드를 분석해 봅시다. 좋아하는 연예인은 누구입니까 ? fighting! girls day! 이전의 문서를 다시 불러왔습니다. 이제 하나씩 살펴볼까요?HTML태그 들은 태그 사이에 씁니다. 하지만 태그들을 보시면 이라는 태그 밖에 쓰인 태그 같이 생긴 것이 보이시죠 ? (태그는 아닙니다.) 이건 HTML 문서의 맨 처음에 와서 웹 브라우저에게 이 페이지가 어떤 버전의 HTML로 작성되어 있는지를 가르쳐줍니다. 그래서 올바르게 해석할 수 있도록 도와주죠. 앞으로 작성할 문서들은 모두 HTML5를 사용합니다. 그리고 위의 표시는 HTML5로 해석하라고 지시해주는 것이죠. 정리하자면, 문서 맨 위의 은 브라우저에게 HTML5로 해석하라고 지시해주는 겁니다. 그리고 이라는 태그가 시작되고 그 안에..