HTML, CSS

1. 플렉스란? 플렉스(flex)는 1차원 레이아웃을 만드는 기술입니다. 여기서 차원이란 x축(수평)이나 y축(수직) 같은 하나의 축을 말합니다. 즉, 1차원 레이아웃이란 수평축으로만 정렬하거나 수직축으로만 정렬하는 방법읠 의미합니다. 플렉스는 크게 Flex Container와 Flex Items라는 두 가지 개념으로 살펴볼 수 있습니다. Flex Container는 정렬할 요소들의 묶음을 의미하고, Flex Items는 정렬할 요소를 의미합니다. flex가 나오기 전에는 float 등을 이용하여 레이아웃을 만들었지만, flex를 사용하면 다양하고 유연한 반응형 웹을 쉽게 만들 수 있습니다. - HTML Flex Container(column) flex-items flex-items flex-items ..

1. 멀티미디어 인터넷 초기에는 웹 사이트에서의 학인을 PC를 통해서만 가능했습니다. 그래서 여러 가지 미디어 파일을 확인하기 위해서는 ActiveX를 설치해야만 볼 수 있어 불편했습니다. 그러나 HTML5에서는 ActiveX를 따로 설치하지 않아도 텍스트와 이미지, 오디오, 비디오를 웹 페이지에서 바로 볼 수 있습니다. HTML5에서 멀티미디어를 재생하는 방법에 대해 알아보겠습니다. 2. : 오디오 파일을 넣는 태그 HTML5에서는 오디오를 재생하기 위해 태그를 사용합니다. 형태 3.: 영상 파일 넣기 HTML5에서 영상을 실행하려면 태르를 사용합니다. 태그의 형식은 다음과 같습니다. 멀티미디어_비디오 video 태그 안에 들어갈 수 있는 속성은 다음과 같습니다. 속성 설명 controls 웹 화면에 ..

1. value와 placeholder의 차이점 input 태그 속성에는 value와 placeholder을 지정해줄 수 있습니다. 차이점을 쉽게 파악하기 위해 코드로 바로 확인해보겠습니다. value와 placeholder 차이점 value는 초기값으로, 말 그대로 초기에 이미 입력되어 있는 값입니다. 입력 시 이어서 작성됩니다. 사용자에게 입력할 때 도움을 줍니다. (ex. 휴대폰 번호 input 공간일 때, value로 010-을 입력한다면 직관적 이해에 도움을 줍니다!) placeholder은 예시값으로 입력할 때 삭제되어 보이지 않습니다. 2. 태그 지난 시간에 form 태그에서 다양한 input 태그의 유형에 대해 알아보았습니다. [HTML] form 태그 2 - 다양한 input 태그의 유형..

[HTML] form 태그 1 - , , 태그 인터넷을 사용하다 보면 사용자의 의견이나 정보를 전달 받기 위해 회원 가입, 검색 등 다양한 정보를 입력받고 있습니다. 이런 공간을 폼(form)이라고 합니다. 로그인 페이지로 예시를 들면, 폼 hyun0907.tistory.com 저번에 form 태그에 대해 공부했습니다. 이어서 방문자로부터 정보를 입력 받을 때 주로 사용하는 폼 요소 중 태그가 있는데, 이 input 태그의 다양한 유형을 정리해보겠습니다. input 태그의 유형은 type="속성"에 의해 결정됩니다. input 태그는 다음과 같은 형식으로 사용할 수 있습니다. name 속성과 id를 지정하여 같은 항목들을 구분하여 지정할 수 있습니다. 목차 (클릭 시 이동합니다) 1. hidden: 보이..

인터넷을 사용하다 보면 사용자의 의견이나 정보를 전달 받기 위해 회원 가입, 검색 등 다양한 정보를 입력받고 있습니다. 이런 공간을 폼(form)이라고 합니다. 로그인 페이지로 예시를 들면, 폼으로 작성된 로그인 페이지에서 사용자가 아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 해당 내용이 웹 서버로 전송됩니다. 서버는 자신이 가지고 있는 사용자 데이터 베이스를 체크해 서로 일치하는지 확인 후 그 내용을 브라우저로 전송해 표시합니다. 이때 폼과 관련된 작업은 대부분 데이터베이스를 기반으로 진행됩니다. 데이터베이스에 관련된 세부 작업은 프로그래밍한 개발자가 담당하며 웹 퍼블리셔, 웹 디자이너들은 해당 폼을 만들기 위한 다양한 입력 양식을 사용자에 맞게 작업합니다. 1. 태그 이렇게 하나의 입력 양식을 ..

우선 Semantic(시멘틱)이란, '의미의, 의미론적'이라는 뜻입니다. 시멘틱 태그는 말 그대로 의미가 있는 태그라는 뜻입니다. 1. 시멘틱 태그를 써야 하는 이유 웹 표준 코드인 HTML5도 구조가 복잡할 경우, 소스 코드에서 구조 파악하기를 하기가 쉽지 않습니다. 따라서 시멘틱 태그를 사용하도록 권장하고 있습니다. 시멘틱 태그는 HTML5에서 추가된 태그로 페이지의 구조를 쉽게 파악하도록 도와줍니다. 또한, 검색 엔진 같은 프로그램에서도 콘텐츠를 쉽게 이해할 수 있게 됩니다. 따라서 검색 엔진 최적화 등 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와줍니다. 그리고 시각 장애인들을 위한 웹 표준 방식이기도 합니다. HTML5 이전, 시멘틱 태그가 나오기 전에는 웹 페이지에서 구조를 ..

저번에 float에 대해 공부한 적이 있습니다. 이번에는 float의 특징에 대해 더 자세하게 다루겠습니다. float은 떠오르다, 떠다니다라고 번역할 수 있습니다. float은 요소를 '띄우는' 개념입니다. 특징은 크게 3가지입니다. 1. float된 요소는 자신의 부모 요소의 content 영역 내에서 배치됩니다. 부모 안에 있는 모든 자식이 float되었을 경우, 부모의 높이는 0이 됩니다. 2. float 적용 시 margin 상쇄 규칙을 해결할 수 있습니다. 3. inline 요소에 float 적용시 display: block으로 변경됩니다. 모든 자식이 float될 시 부모의 높이는 0이 됩니다. float 속성을 부여하면 그 요소는 부모 요소의 content에 없는 것처럼 배치됩니다. 배치되..

CSS 포지셔닝은 박스 모델을 배치하는 것을 의미합니다. CSS에서는 float을 이용해 정렬을 할 수 있습니다. float은 사전적 의미로 '떠오르다', '떠다니다'입니다. 웹 페이지에서는 float을 왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우 'none'으로 표현합니다. 1. float 쓰는 법 선택자{ float: left; /* 문서의 왼쪽으로 배치 */ float: right; /* 문서의 오른쪽으로 배치 */ float: none; /* 배치하지 않음 */ } 예문을 하나 작성해보겠습니다. DOCTYPE html> float 사진+글 div{ width: 600px; height:700px; border: 5px solid #000; margin: 50px auto; } im..