CSS flex에 대해 #CSS flexCSS3에서 레이아웃을 구성하는 데 있어 간편한 방식 중 하나인 flex에 대하여 알아보도록 하겠습니다. flex의 두 가지 구성 방법flex는 두 가지의 활용 방법으로 구분이 가능합니다. 하나는 container요소에 적용하는 방식, 다른 하나는 container요소의 자식 요소인 item에 적용하는 방식입니다. 먼저, container에 적용하는 방식부터 알아보도록 하겠습니다. (명칭만 컨테이너일 뿐 부모요소와 자식요소의 차이라고 생각하시면 됩니다.)flex-container 속성속성설명displaycontainer에 flex 를 적용할 때 활용합니다.flex-flowflex-direction,flex-wrap을 함축한 속성입니다.flex-directioncontainer 주 축의 시.. CSS 레이아웃 속성에 대해서 알아보자 CSS 박스모델을 이용해서 문서의 레이아웃을 조정 가능한 속성들에 대해 알아보겠습니다. CSS position position은 문서상의 텍스트, 이미지, 박스 모델까지 요소들을 문서에 배치할 때 사용하는 속성입니다. 속성값마다 top, bottom, left, right 등 다르게 위치를 조정할 수 있습니다. position의 속성값들은 다음과 같습니다. position: static; position: relative; position: absolute; position: fixed; position: static; .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; margin-top: 10.. CSS3의 박스 모델에 대한 이해 HTML 문서 내에 안에서 표현되는 대부분의 요소들은 박스 모양의 형태로 이루어져 있습니다. 이를 박스 모델(box model)이라고 표현합니다. 이 박스 모델을 이용해서 웹 문서의 전체 레이아웃을 구성하고 각종 요소들을 화면 내의 원하는 위치에 배치하거나 조절하여 화면을 디자인할 수 있습니다. 박스 모델의 구성 박스 모델의 구성은 다음과 같습니다. content : 가장 안쪽 공간으로 텍스트, 이미지, 다양한 요소들이 삽입되어 실제 내용이 표현되는 공간입니다. padding : 콘텐츠와 테두리 사이의 여백입니다. 안쪽 여백이라고도 표현합니다. border : 박스의 테두리를 표현합니다. 두께를 조정하거나 굴곡 조절이 가능합니다. margin : 박스의 테두리와 박스의 최종 경계 사이의 여백입니다. 바깥.. CSS3 선택자에 대해 선택자는 HTML의 태그 하나나 여러 개를 선택할 때 사용합니다. CSS에서는 이러한 선택자가 여러 개가 사용됩니다. 기본 선택자 전체 선택자 : * { 속성 선언; } . HTML 문서 내 모든 태그에 스타일을 적용합니다. 타입 선택자 : 태그 { 속성 선언; } . 지정한 태그에 스타일을 적용합니다. 클래스 선택자 : 클래스 이름 { 속성 선언; } . 지정한 클래스에 스타일을 적용합니다. 아이디 선택자 : #아이디 이름 { 속성 선언; } . 지정한 아이디에 스타일을 적용합니다. 전체 선택자 말 그대로 전체 태그에 스타일을 적용하는 방법입니다. * { color: blue; } 이렇게 적용하게 되면 이후 다른 태그에 변경하지 않는 한 모든 글자색이 파란색으로 변경됩니다. HTML 요소 선택자 가장 .. CSS3의 기본 사용법 CSS 정의 문법 HTML과 같이 CSS를 작성할 때에도 지켜야 할 문법이 존재합니다. 기본적인 문법은 다음과 같습니다. div { width: 450px; } 먼저 코드의 제일 앞부분의 '선택자'(예시: div)라고 불리는 스타일 태그를 적용할 대상을 지정해 줍니다. 이후 중괄호를 열어서 선언 블록을 시작해 주고, 이후 '속성'(예시 : width)을 선택하고, 콜론을 작성한 후 속성에 따른 '속성값'(예시: 450px) 넣어주고, 세미콜론으로 마무리를 지어주고 중괄호를 닫아 마무리해 줍니다. 정리하자면, '선택자 { 속성: 속성값; }'의 형태로 작성해 주시면 됩니다. 이에 더해 가독성을 위해, 위쪽 방식보다는 아래의 방식대로 작성하는 것을 권장하고 있습니다. div { width: 960px; ba.. 공간 분할 태그에 대해 웹 문서상에서 공간을 분할하는 방법에는 두 가지가 있습니다. 첫 번째로는 프레임(iframe)이라는 공간으로 나누어서 분할하는 방법입니다. 또 다른 방법은 공간을 분할하는 태그 태그와 태그를 자주 사용합니다. 먼저 태그에 대하여 알아보도록 하겠습니다. 태그에 대하여 태그는 'inline frame'이란 단어에서 온 말로 한 웹 문서내에 다른 웹 문서를 삽입하는 기능 입니다. 기본적인 작성 방식은 다음과 같습니다. content or 내용 iframe으로 공간 분할 하기 위 코드를 적용하면 다음과 같이 출력됩니다. 와 에 대하여 태그와 태그는 문서상의 공간을 전체적으로 활용할 것인지, 일부 영역만 분할하여 활용할 것인지에 따라 다르게 사용됩니다. : 웹 브라우저 전체 공간에 대해서 분할합니다. 이를 '블록.. HTML5의 입력 양식에 대해 알아보자 웹 양식은 사용자가 웹 문서에 어떠한 데이터를 입력하고 그 결괏값을 가져오기 위해 사용합니다. 이럴 때 사용자로부터 입력을 받기 위한 도구로 태그를 활용합니다. 이 태그가 무엇인가에 대해 알아보도록 하겠습니다. 태그 태그는 입력 양식 지정을 위한 기본 태그입니다. 입력 양식의 최상위 요소로서 입력 양식을 생성하기 위해 가장 먼저 작성해야 하는 태그입니다. 태그의 기본적인 작성 방법부터 알아보도록 하겠습니다. 작성 방법은 다음과 같습니다. 위 코드에 나와있는 속성을 하나하나 설명드려 보도록 하겠습니다. name : 현재 폼 태그의 이름을 지정해 줍니다. action : 사용자가 입력한 데이터를 처리하기 위한 웹 프로그램의 페이지를 지정합니다. ASP, PHP, JSP 등 여러 가지가 있습니다. method.. 시맨틱 태그와 레이아웃 구성 시맨틱 태그 위에 나온 태그들처럼 HTML태그를 태그의 이름만 보고 태그의 위치나 역할을 알 수 있게 하는 태그라고 할 수 있겠습니다. 시맨틱이란 단어의 의미는 '의미하는, 의미론적' 이라는 뜻을 가지고 있습니다. 따라서 시맨틱 태그는 태그의 내용에 대하여 의미를 부여하는 태그, 즉 태그 내의 포함된 콘텐츠의 특정한 의미나 역할을 부여하는 태그라고 생각하시면 됩니다. 이를 통해서 해당 웹 문서를 브라우저나 검색엔진이 분석하기 더 쉽고 정확하게 만들어줍니다. 과거 HTML5 이전에는 태그에 id 나 class 이름을 부여해 역할을 정해주었지만 현대에서는 시멘틱 태그를 활용해 편집과 역할 인식을 좀 더 편리하게 할 수 있도록 도움을 줍니다. 시멘틱 태그 활용시에 장점 시멘틱 태그를 활용할 경우 다음과 같은 .. HTML이란 HTML은 문서의 구조를 정의하는 마크업 언어입니다. 문서상에 표현되는 콘텐츠나 텍스트등을 태그등으로 감싸서 웹 브라우저가 해당 문서에 대해서 좀 더 정확한 판단을 내릴 수 있게 해 주거나, 작성자의 의도대로 표현할 수 있게 해 줍니다. 아래에서 이런 HTML을 구성하게 되는 요소들에 대해서 분석해 보도록 하겠습니다. HTML의 기본적인 구성 요소에 대해I love you.여는 태그와 닫는 태그 : 대부분의 태그들은 여는 태그와 닫는 태그로 이루어져 있습니다. 위에서는 가 그 역할을 하게 됩니다. 태그들은 작성자가 원하는 위치에 생성하거나, 의도에 맞는 태그들을 배치할 수 있습니다.콘텐츠 : 요소의 내용들을 의미합니다. 주로 텍스트나, 이미지, 동영상, 여러가지 형식으로 표현 가능합니다.요소 :.. 이전 1 다음
