HTML5와 CSS3를 이용한 간단한 Web페이지 만들기 -part1-
제가 갑자기 중간 내용을 빼먹고 곧바로 실습을 들어온 이유는너~무 정리할 것도 많고 시간도 없어서 내용들은 제 노트에다가 정리를 해두고이렇게 실습을 통하여서 그때그때 나오는 개념들을 아주 자세하게 설명하기 위해서 이렇게 다시 돌아왔어요~(짝짝) 일단! web페이지를 구성할려면 레이아웃부터 구상을 해야됩니다. 레이아웃을 구성할때 생각해야 하는 점★공간 분할 방법!!!! 1.웹 페이지를 구상한다.2. 웹 페이지의 구성 영역을 분리한다.3. 구성영역을 행 단위로 분리한다.4. 나누어진 행의 내부요소를 분리한다. [1단계]저는 홈페이지 레이아웃을 아래 사진과 같이 구상할거에요 그 다음이 구성 영역을 행 단위로 분리하는 단계였죠?ㅎㅎ 위에 Header 부분을 1행Section과 aside를 2행Footer를 3행..
문자 선택자[시작 문자 선택자, 전후 문자 선택자, 반응 문자 선택자]
이번 포스팅에서는 문자 선택자 중에서-시작 문자 선택자-전후 문자 선택자-반응 문자 선택자에 대해 포스팅을 해보도록 하겠습니다. 1. 문자 선택자 태그 내부의 특정한 조건의 문자를 선택하는 선택자보통 :: 를 사용하지만 : 도 사용 가능 1-1. 시작 문자 선택자 태그 내부의 첫 번째 글자와 첫 번째 줄을 선택할때 사용하는 태그 문법 형태 ::first-letter -> 첫 번째 글자를 선택::fist-line -> 첫 번재 줄을 선택 예제를 통해서 한번 알아보도록 하겠습니다. 여기다가 시작 문자 선택자를 한번 적용시켜 볼게요 "p태그 중에서 첫번째 글자 크기를 3em 으로 해줄게" "p태그 중에서 첫번째 줄의 글자 색을 빨강으로 해줄게" 짠~~참 쉽죠잉? 1-2. 전후 문자 선택자 특정 태그의 전후에 ..
구조 선택자(형태 구조 선택자)
이번 포스팅에서는 전시간에 이어서 구조 선택자 중에서형태 구조 선택자에 대해서 한번 알아보도록 하겠습니다. 형택 구조 선택자 일반 구조 선택자 내용과 비슷하다. 그치만 다른점은 태그 형태를 구분하는 것 문법 형태 :first-of-type -> 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택:last-of-type -> 형제 관계 중에서 마지막 번째로 등장하는 특정 태그를 선택:nth-of-type(수열) -> 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택:nth-last-of-type(수열) -> 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그를 선택 여기에서 보면 알 수 있듯이HTML코드를 보시면 header태그인 h1태그가 2개 존재합니다.style에서 h1:fir..
구조 선택자(일반 구조 선택자)
이번 포스팅에서는구조 선택자에 대해 알아볼건데요 구조 선택자는-일반 구조 선택자-형태 구조 선택자있습니다. 한번 알아보도록 하죠! 1. 일반 구조 선택자 음..뭐라 설명할지 모르겠네요 ㅎㅎ 그냥 특정한 위치에 있는 태그를 선택하는 선택자라고 기억해두세요바로 예제로 넘어갈게요 긴 설명은 하지 않겠습니다. 그치만 어떻게 변화하는지 잘 보시기 바랍니다. 아직까지는 그렇게 큰 변화는 없습니다. 저 overflow:hidden 이 무엇이냐?? 이전 포스팅에서도 말씀 드렸지만 정해진 박스에서 내용물이 박스를 넘어가면 넘어간 내용물을 보여주지 않겠다 라는 뜻 입니다. float:left -> 태그를 왼쪽에다가 위치 시킨다는 뜻 padding은 박스 안의 여백 입니다. 이와 친구인 애가 있쪄? 바로 margin인데요 ..
상태 선택자 -part2-
전 시간에 이어서 이번시간에도 상태 선택자에 대해 설명 하도록 하겠습니다. START~ focus선택자쪽만 보시기 바랍니다. 각각 input태그로 서로 다른 속성을 가진 네이버와 다음을 코딩 하였습니다. 그리고 CSS 부분에 input:focus+a 라고 입력을 하였습니다.focus는 초점이 맞추어진 input태그를 선택합니다.즉, css에서 선택한 곳에 마우스를 클릭하면 css에서 입력한 대로 style이 입혀져요 좀더 정확하게 알아보기 위해 내용을 약간 더 추가하도록 할게요 이렇게 속성이 기본값인 type=text인 input 태그를 작성을 해주고css에다가는 배경색을 갈색으로 해줍니다. 그러면 text입력창에 마우스를 클릭하면 위와같이 갈색으로 배경이 입힙니다. focus 상태 선택자에 대해 어느정..
동위 선택자, 반응 선택자, 상태 선택자 -part1-
이번 포스팅에서는-동위 선택자-반응 선택자-상태 선택자에 대해 예제와 함께 알아보도록 하겠습니다. 가장 먼저 동위 선택자! 1. 동위 선택자동위.. 동위라는 뜻은 같은 위치에 있는 이라는 의미를 가지고 있습니다.(다들 아시겠지?;;)따라서 동위 선택자는 같은 위치에 있는 것들을 선택한다 라는 뜻 입니다. 사용 문법선택자A + 선택자B -> 선택자 A 바로 뒤에 위치하는 선택자 B를 선택 선택자A ~ 선택자B -> 선택자A 뒤에 위치한 선택자 B를 선택 예제를 통해서 한번 알아보도록 할게요 일단 결과는 이렇게 나왔어요 여기다가 이제 style을 입혀볼게요 이제 동위 선택자가 어떤 의미인지 아셨나요?? 이 동위 선택자는 CSS3 애니메션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 동위 선택자를 사용한다..
후손 선택자와 자손 선택자
이 번 시간에는 후손 선택자와 자손 선택자에 대해 알아보도록 할게요 자 일단! 후손과 자손이 무엇이냐? 우리 인간 관계랑 똑같아요 후손 : 어떠한 태그 아래에 위치한 모든 태그자손 : 어떠한 태그 바로 아래에 위치한 태그 1. 후손 선택자특정한 태그 아래에 있는 후손을 선택할때 사용 예제를 보면서 좀 더 자~~~세하게 자손과 후손에 대해 알아볼게요 자! 일단 이렇게 입력을 해줍니다. 그러면 출력 결과는 요렇게 나올거에요 이제 해석을 들어가도록 할게요 이 문장을 보시면 태그로 묶어져 있습니다.※div 태그는 간단하게 벽돌쌓기 라고 생각하기!!! 일단 첫번째 div의 id(이름) 은 header 이라고 정하였습니다.그리고 div 태그 내부에 포함되어 있는 h1 태그와 또 다른 div 태그들이 있는데요 여기서..