AimHo

CSS 속성공부 #2 / 박스에 대해 알아보자 / AimHo이번에는 웹 페이지의 레이아웃을 구성할 때 가장 중요한 박스에 대해 공부하려 한다. 박스는 아래 이미지에 표시된 속성을 모두 합쳐 박스 속성이라 이야기한다. 이미지출처: 한빛미디어 width, height 속성 여기서 글자를 글자라고 생각하면 된다. width와 height는 글자를 감싸는 영역의 크기를 지정한다. 단어 해석만 해봐도 어떤 속성인지 쉽게 알 수 있을것이다. margin, padding 속성 margin과 padding는 웹 페이지에서 여백을 만들때 많이 사용한다. 박스속성을 설명한 이미지를 다시 확인해보자. margin, padding의 차이가 보이는가?? 두 속성 모두 여백을 만드는 속성이지만, 테두리를 만드는 border를 기..

CSS 속성공부 #1 / 단위에 대해 알아보자 / AimHo이전에는 CSS 선택자를 살펴보았다. 이번에는 CSS 스타일 속성과 값을 이용해 웹 페이지를 디자인하는 방법에 대해 공부하도록 하겠다. 굉장히 많은 내용이 나오지만 외우려고 생각하지 말고, 이런게 있구나~ 하고 넘어가면 된다. 사용하고 싶은 속성의 코드를 모르면 구글링을 통해 이렇게 쓰는구나 하고 사용하면 된다. 코드를 여러 번 입력하다 보면 저절로 외워지기 마련이다. CSS 단위란? CSS의 스타일 값으로 입력할 수 있는 단위를 말한다. 여기에는 키워드, 크기, 색상, URL 총 4가지가 있다. 속성별로 한 가지 단위만 사용할 수 있는 건은 아니므로 우선 스타일의 값의 단위 종류부터 알아보자. 키워드단위 키워드는 W3C에서 미리 정의한 단어이다..

CSS 입문 / CSS 선택자에 대해 알아보자!HTML 항목의 [간단한 웹 페이지 만들기!] 글을 기억하는가? 저기서 웹 페이지는 굉장히 투박한 모양을 하고 있다. 저 투박한 웹 페이지에 앞으로 공부할 CSS(Cascading Style Sheets)를 적용해야 이쁜 웹 페이지를 완성할 수 있다. HTML 첫 글에서 언급했었는데, 네이버도 CSS가 빠지게 되면 투박한 형태로 보여지게 된다. 이제 CSS를 공부해볼건데, 가장 기본인 CSS 선택자를 다뤄보려고 한다. 실질적으로 화면에 있는 무언가를 조작하는 것이 아니므로 지루하게 느낄 수도 있지만, CSS 선택자를 모르면 이후의 내용을 진행할 수 없으니 차근차근 익혀보기를 바란다. CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는..

HTML / 기본태그를 활용한 웹 페이지 틀 만들기자 이제 앞서 공부한 것을 토대로 간단한 텍스트형 웹 페이지를 만들어 보겠다. 최종 목표는 기본 블로그 형태로 웹 페이지를 꾸미는 것인데, 아직 CSS를 배우지 않아서 불가능하다. 따라서 HTML5를 사용해서 기본 구조만 짜보려고 한다. 위와 같은 형태의 웹 페이지를 만드려고 한다. 일단 위 페이지의 레이아웃을 다음과 같이 단순화 시키고 분리한다. 이렇게 영역을 구분했으면 이 레이아웃을 행 기준(가로로 선을 그릴 수 있는 부분)으로 분리한다. 1. Header2. Navigation3. Section, Aside4. Footer 이제 공간 분할 태그 를 사용해서 레이아웃을 구분한다. 공간 분할(레이아웃 구분) 공간 분할을 완료했으면 안의 내용을 입력해준다..

HTML 입력 양식 태그 / select 태그 익히기[참고] HTML 입력 양식 태그 지난글1. 개요 바로가기2. 간단한 입력 양식 만들기 정말 간만에 HTML 포스팅을 한다. 최근 공부도 안하고 게을렀다.... 이번에는 입력 양식 태그의 마지막 를 진행하려고 한다. select 태그 select 태그는 목록으로 보여주는 항목 중 하나 or 여러 개를 선택할 수 있는 입력 양식 요소 이다. 기본적으로는 하나만 선택할 수 있다. select 태그를 사용할 때는 optgroup, option 태그를 함께 사용한다. 예제코드로 바로 확인해보자! one two three four one two three four 옵션을 선택할 수 있는 요소가 생성된게 보인다. 스마트폰에서는 내장된 옵션 선택화면을 사용하는데, ..

HTML 입력 양식 태그 / 간단한 입력 양식, 쉽게 만들 수 있습니다.안녕하세요 AimHo 입니다. 지난번 [입력 양식 태그 / 개요] 이어서 공부 하겠습니다. 입력 양식 태그 익히기 HTML5는 다양한 입력 양식 태그를 지원하는데, 아래에 주요 태그와 속성, 모양을 정리해보았습니다. 예제 코드를 통해 어떤 모습으로 보이는지 확인해보겠습니다. > 이 외에도 HTML5에서 새로 지원하는 입력 양식 태그도 굉장히 많다고 합니다. 하지만, 오페라 웹 브라우저를 제외하면 거의 지원하지 않는다고 하니 생략하도록 하겠습니다. 간단한 입력 양식 만들기 라디오 버튼의 name 속성을 이용하면 여러 대상 중 하나만 선택하도록 하는 형태를 손쉽게 구현할 수 있습니다. 예제 코드를 작성해서 바로 확인해보도록 하겠습니다. ..

HTML 입력 양식 태그안녕하세요 AimHo 입니다. 이번에는 입력 양식 태그를 다뤄보도록 하겠습니다.입력양식 태그는 로그인, 회원가입 등 사용자에게 데이터를 입력받을 때 사용합니다. 입력 양식 태그입력 양식은 사용자에게 정보를 입력받는 공간을 말하며 입력 양식 태그를 사용해서 만듭니다.입력 양식을 제대로 다루려면 서버와 관련된 기술도 알아야 하지만, 지금은 입력 양식과 관련된 기본 내용만 다루도록 하겠습니다. 입력 양식에 대해 알려면 우선 서버와 클라이언트라는 용어를 알아야 합니다.간략하게 정리하면 아래와 같습니다.서버(제공자): 웹 페이지를 제공해주는 대상클라이언트(고객): 웹 페이지를 받는 대상 일반적으로 서버에서 클라이언트로 데이터가 전달됩니다. 하지만 회원가입과 로그인, 검색과 관련된 버튼을 클..

HTML 멀티미디어 태그: 비디오 태그 오디오 태그 글 확인하기 2018/07/04 - [FrontEnd 글/@HTML강의] - HTML 멀티미디어 태그: 오디오 태그 / by AimHo안녕하세요 AimHo 입니다.지난번에 언급한 HTML 멀티미디어 태그를 이어서 진행하도록 하겠습니다. 오디오 태그 포스팅이 궁금하신 분은 지난번에 작성한 글을 확인하시기 바랍니다 비디오 태그비디오태그는 웹 페이지에서 동영상을 볼 수 있게 만들어 줍니다. HTML5 전에는 오디오와 마찬가지로 비디오도 윈도우 미디어 플레이어 or 플러그인을 사용해야 볼 수 있었습니다. 하지만 HTML5 시대가 오면서 웹 브라우저만으로 동영상을 볼 수 있게 되었습니다. 웹 페이지에 비디오를 삽입할 때는 video 태그를 사용합니다.video ..

HTML 멀티미디어 태그 / 오디오 태그안녕하세요 AimHo 입니다. 이번에는 HTML 멀티미디어 태그 - 오디오 태그에 대해 알아보겠습니다. 멀티미디어태그는 웹 브라우저에서 음악 or 동영상을 재생할 때 사용하며 HTML5에서 추가되었습니다. 현대 웹 브라우저에서 흔하게 접해볼 수 있는 기능들이죠 위 태그들을 사용하지 않아도 플러그인을 사용하면 음악 or 동영상을 재생할 수 있습니다. 그치만 기본적인 문법이니 알고넘어가면 좋습니다! 그러면 오디오 태그부터 살펴보도록 하겠습니다. 오디오 태그오디오 태그는 플러그인이 없더라도 웹 브라우저에서 음악을 재생할 수 있게 만들어줍니다. HTML5에 추가된 기능이므로 인터넷 익스플로러8 이하에서는 사용할 수 없습니다. (여기서 다루지는 않지만, JPlayer 같은 ..

HTML 기본태그 / 공간 분할 태그 안녕하세요 AimHo 입니다.이번에는 HTML 기본태그 다섯 번째 공간 분할 태그에 대해 알아보겠습니다. 과거에는 공간 분할 태그를 사용하지 않지만, 현대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 나눕니다.공간을 분할해야 추후 배우게될 CSS로 원하는 레이아웃을 구성할 수 있기 때문입니다.이해를 돕기 위해 네이버 메인 페이지를 통해 어디에 사용되는지 찾아보겠습니다. 공간 분할 태그는 형태로 사용합니다.네이버 메인 페이지는 약 315개의 div태그를 사용합니다.자주 사용되는 태그이니 반드시 기억해야 합니다! 기본 공간 분할 태그 HTML5의 대표적인 공간 분할 태그는 div와 span입니다. div 태그는 공간을 블록(block) 형식으로 분할하고 span ..