이진욱의코딩

이번 시간에는 css의 여러 가지 속성에 대해 알아보도록 하겠습니다. 목차 1. 단위크기 2. 단위 색상 3. 단위 url 4. 박스 5. margin, padding 1. 단위 크기 일반적으로 css로 스타일을 줬을 때 기본적으로 설정된 h1태그의 폰트 사이즈는 32px이고, p태그의 폰트사이즈는 16px입니다. h1{font-size: 32px;} p{font-size: 16px;} style태그에서 변화를 줬을 때 css는 부모 폰트의 크기를 기준으로 설정합니다. Lorem, ipsum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem..

이번 시간에는 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. 외부 파일로 저장하는 방식 -> 웹 제작..

이번 시간에는 웹문서의 본문을 구성하는 요소들 중에 section울 구성하는 요소에 대하여 알아봅시다. 1. body요소 body요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려준다. 2. header요소 html5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. 동아스포츠신문 국내에서 제일 많이 보는 스포츠신문 문서나 각 section, article의 헤더부분에 사용 가능하며, 그것들의 제목이나 간단한 ..

오늘 포스팅 내용은 여러 가지 태그에 대해 알아보는 시간을 가지도록 하겠습니다. -목차- 1.오디오태그 오디오 태그는 웹브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그이다. HTML5에서 추가된 기능이므로 IE8 이하에서는 사용할 수 없다. 옛날 html은 각자 확장자에 따라서 mp3, ogg, wmv 등이 있었지만 현재는 mp3만 적어도 됩니다. 이런 식으로 말이죠. controls는 말 그대로 음악 재생할 때 직접 컨트롤을 할 수 있게 만드는 명령어입니다. 2. 비디오 태그 비디오 태그는 웹페이지에서 동영상을 볼 수 있게 만들어주는 기능을 수행한다. 원래 HTML5 시대가 오기 전에는 비디오도 윈도 미디어 플레이어 또는 플래시와 같은 플러그인을 사용해서만 볼 수 있..

이번 시간에는 저번 시간에 했던 폼 태그를 응용하는 모습을 보여드리겠습니다. 우선 우리가 이번시간에 만들 것을 미리 보도록 하겠습니다. 어제 했던 거랑 비슷하죠? 그러니 바뀐부분이나 추가된 부분만 설명하겠습니다. 신청자 이름 autofocus는 자동으로 포커스를 맞춰주는 역할을 합니다. required는 반드시 작성해야 하는 칸으로 바뀌게 하는 역할을 합니다. placeholder은 미리 회색으로 텍스트가 뜨게만드는 역할을 합니다. 물론 마우스를 갖다 대면 사라지죠. -- 이런 구조로 보통 연락처를 기입할때 사용하는 방식입니다. datalist는 input type text한테 리스트를 부여해주는 태그입니다. 이런 식으로 말이죠. input type 중 reset은 기입한 내용을 모두 초기화시키는 역할을..