이진욱의코딩

이번 시간에는 css에서 float속성에 대해서 알아보도록 하겠습니다. 흔히 블로그에서 글을 보거나 책에서 첫 페이지 시작할 때 첫 문자는 대문자로 합니다. 이 속성을 "::first-letter" 이라는 속성입니다. p::first-letter{font-size:50px; color: blue;} 이렇게 색상과 크기를 조정해서 사용할수 있습니다. 이미지를 넣어서 그 이미지에 맞게 글을 배치하는 방법도 있습니다. 바로 float속성에서 none,left,right를 선택해서 사용하면 됩니다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus ad totam nam ut aspernatur saepe possimus nisi nemo..

이번 시간은 css의 기술 중 하나인 위치에 대해 알아보도록 하겠습니다. 먼저 position의 상대 위치에 대해 알아보겠습니다. 여러 가지 오브젝트를 생성 후에 위치를 조정하게 될 때 사용하며 position의 옵션 중 relative를 선택하면 기존 오브젝트에 대해 상대적으로 배치되게 만듭니다. 우선, 예시를 보면서 설명드리겠습니다. box1 box2 box3 position:relative를 사용하면 이런 식으로 나타낼 수 있습니다. 만약 상대적으로 오브젝트를 이동하다가 겹치는 부분이 있다면 z-index를 써서 맨 앞부분에 나타낼 부분과 뒷부분에 위치시킴을 조정할 수 있습니다. z-index값이 높을수록 우선권을 얻습니다. 위치 속성 중 position: relative는 적용하는 요소를 기준으로..

이번 시간에는 css의 여러 가지 폰트 속성에 대해 알아보겠습니다. 첫 번째로는 text-align속성인데요 text-align은 블락 요소 내 인라인(텍스트, 이미지 등) 요소의 문단 정렬을 위한 속성으로, "블락 요소"에 적용해야 합니다. 이미지(img) 같은 경우에는 인라인 요소이기 때문에 적용이 불가능합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, possimus. Lorem ipsum dolor sit amet, consectetur adipisicing. 두 번째로는 vertical-align속성인데요 흔히 수직 정렬할 때 사용됩니다. 텍스트를 수직으로 정렬하는 속성으로 vertiacl-align를 사..

이번 시간에는 css에서 쓰이는 여러 가지 선택자에 대해서 알아봅시다. ※목차 1. 전체선택자 2. 태그 선택자 3. 그룹 선택자 4. 후손 선택자 5. 자식 선택자 6. 동위 선택자 7. 형제 선택자 8. 기본 속성 선택자 1. 전체 선택자 말 그대로 전체를 선택해서 css를 입히는 것입니다. 타이틀 태그 바로 밑에 style태그로 전체를 선택하는 것입니다. 2. 태그 선택자 body태그 안에 각자의 태그(h1, p, 등등)를 선택해서 그 부분에 style태그로 감싸는 것입니다. 3. 그룹 선택자 한꺼번에 여러 선택자에 대해 스타일을 적용할 때에 사용합니다. 각각의 선택자를 콤마(,)로 구분해서 나열합니다. 4. 후손 선택자 후손 선택자는 특정 태그의 후손을 선택할 때 사용되는 선택자입니다. 예를 들어..

저번 시간까지 html파트를 끝내고 이번 시간부터는 css에 대해 알아봅시다. css는 html문서에 디자인을 입힌 언어입니다. 예시를 먼저 보도록하죠. 놀랍게도 위의 두 사진은 똑같은 페이지의 똑같은 내용입니다. 같은 글에서 css를 첨가해서 저렇게 만든 거지요. 이게 바로 css입니다. 스타일시트 적용방법에 대해 알아보겠습니다. 스타일시트 적용방법은 총 3가지가 있으며, 각각의 장단점에 대해 알아보도록 하겠습니다. 1. 인라인 방식 -> 태그에 직접 적용하는 방법으로, style속성을 적용할 수 있습니다. 인라인 방식 태그에 직접 적용하는 방법으로, style속성을 적용한다. 2. 임베디드 방식 -> head태그 내에 style태그를 적용하는 방법입니다. 3. 외부 파일로 저장하는 방식 -> 웹 제작..

이번 시간에 할 내용은 화면의 크기가 줄어들면 색이 바뀌는 반응형웹을 만들어 볼겁니다. 800px을 기준으로 화면크기가 800px보다 클 때, 작을 때의 디자인을 미디어 쿼리를 통해 다르게 만들어 보겠습니다. @media(max-width:800px){ body{ background-color: aquamarine; } } @media(min-width:600px){ body{ background-color:pink; } } 이렇게 크기가 800px일 때랑 600px로 변경했을 때 어떻게 바뀌는지 봅시다. 이런식으로 웹창을 줄이거나 늘일 때 색이 변화하는 모습을 볼 수 있습니다.