'Programming/HTML&CSS' 카테고리의 글 목록

Programming/HTML&CSS (16)

[HTML5/CSS3] CSS 속성 강좌 #4 - border 속성

Programming/HTML&CSS Lkt_Programmer 2019. 4. 4. 12:35

이번 포스팅에서는 html 요소에 테두리를 지정하는 border 속성에 대해서 알아보도록 하겠습니다. 1. border 속성 border 속성은 요소의 테두리를 지정할 때 사용하는 속성입니다. CSS로 border 속성을 지정하는 형태는 아래와 같습니다. ▼ 첫 번째 요소에는 테두리 두께가 오고 두 번째 요소에는 테두리 스타일 세 번 째 요소에는 테두리 색깔이 옵니다. 특정 요소의 4가지 방향에 대해서 각각 다르게 border 속성을 부여하는 것이 가능합니다. 각 방향에 대한 속성명은 아래 그림과 같습니다.▼ 요소에서 각 영역의 위치는 4가지로 구분이 가능합니다. top, right, bottom, left 영역으로 나누어지고 각 영역에 대해 다르게 border 속성 적용이 가능합니다. 아래 샘플 예제를..

[HTML5/CSS3] CSS 속성 #3 - box-sizing 이해

Programming/HTML&CSS Lkt_Programmer 2019. 4. 2. 10:45

CSS 속성 강좌 3번째 포스팅입니다. 오늘 포스팅 할 내용은 box-sizing 속성인데요. 해당 속성은 특정 엘리먼트의 크기를 어떻게 결정 할 것인지를 선택 할 수 있도록 해주는 속성입니다. div 태그로 정의 된 박스형태의 레이어가 있고 CSS 속성부여로 박스 영역의 width와 height 크기를 각각 200px로 지정하였다고 가정 해보겠습니다. 이 때 box 영역 사이즈에 영향을 끼칠 수 있는 border 값과 padding 값도 지정을 하였다면 border값과 padding 값도 전체 영역 크기에 포함이 되면서 의도했든 의도하지 않았든 200px 보다 더 큰 width와 height 크기를 가지는 영역이 설정이 됩니다. box-sizing 속성은 padding이나 border 값을 전체 영역크..

[HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이

Programming/HTML&CSS Lkt_Programmer 2019. 3. 31. 12:32

안녕하세요. 오늘은 CSS 속성 중 margin과 padding에 대해서 포스팅을 하고자 합니다. margin과 padding 속성의 경우 웹 페이지의 요소 배치와 관련해서 아주 중요한 속성이라고 할 수 있습니다. 반드시 margin과 padding 속성에 대해 정확히 알고 두 속성의 차이점에 대해서도 반드시 이해를 하셔야 합니다. margin과 padding은 html 요소사이의 간격을 설정 할 수 있는 속성인데 적용이 되는 형태에 차이가 있습니다. 아래 그림을 참고해주세요. ▼마치 붉은색 사각형 영역안에 파란색 사각형이 들어간 형태로 보이지만 사실 붉은색 영역은 공백영역이라고 생각하시면 됩니다. 먼저 왼쪽 영역의 파란색 사각형을 original size라고 생각하고 보시길 바랍니다. 상하좌우 각각 5..

[HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility

Programming/HTML&CSS Lkt_Programmer 2019. 3. 29. 12:08

안녕하세요. 저번 포스팅을 마지막으로 CCS 선택자에 대해 공부를 했습니다. 사실 제가 포스팅한 내용 말고도 다른 선택자들이 더 많습니다만 사용 빈도가 높지 않다고 판단하여 따로 포스팅을 하지 않을 생각입니다. 이번 포스팅부터는 CSS 속성에 관해 포스팅을 이어 나갈 생각입니다. 오늘 다룰 내용은 CSS 속성 중 display / opacity / visibility 속성이 되겠습니다. 하나씩 알아보도록 하죠. 1. display 속성 display 속성은 태그가 화면에 어떤 식으로 보이는지를 지정하는 속성입니다. 앞서 div 태그와 span 태그의 차이를 다루는 포스팅에서 언급한 적이 있는 내용인데요. display 에 사용되는 속성값은 여러개가 있지만 중요한 속성 3개 값만 살펴 보겠습니다. 속성값 ..

[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자

Programming/HTML&CSS Lkt_Programmer 2019. 3. 28. 12:54

안녕하세요. CSS 선택자 강의 4 번째 포스팅입니다. 오늘 포스팅 할 내용은 반응/상태/구조 선택자가 되겠습니다. 다른 선택자 공부를 하고 싶으면 아래 다른 포스팅을 참고해주세요. CSS 선택자 공부하러 가기! [HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자 [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자 1. 반응 선택자 반응 선택자는 웹 페이지를 보는 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정 할 수 있는 선택자를 의미합니다. 반응 선택자의 유형에 대해서는 아래 표를 참조해주세요. 유형 해석 h1:hover h1 태그..

[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자

Programming/HTML&CSS Lkt_Programmer 2019. 3. 27. 13:52

안녕하세요. CSS 선택자와 관련된 3번째 포스팅입니다. 오늘 배울 선택자는 하위 선택자와 자식 선택자 그리고 등위 선택자가 되겠습니다. 다른 CSS 선택자 공부하러 가기 ! 선택자(Selector)를 통해 CSS를 적용해보자 #1선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자 1. 하위 선택자와 자식 선택자 먼저 태그 구조에서 자손과 자식에 대한 개념을 살펴보겠습니다. 태그를 활용하여 작성한 간단한 HTML 코드입니다. 해당 코드의 태그 구조를 tree 구조로 살펴보면 다음과 같습니다. 후손이라는 말은 특정 태그에 종속되어 있는 모든 하위 요소들을 의미합니다. 위 구조에서 html 태그의 후손에 해당하는 태그들인 태그들에 이에 해당합니다. 자식 태그의 경우는 특정 태그에 종속되면서 ..

[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자

Programming/HTML&CSS Lkt_Programmer 2019. 3. 26. 13:38

안녕하세요. 저번 포스팅에서 전체선택자, 태그선택자, id선택자, class 선택자에 대해서 알아 보았는데요. 이어서 다른 선택자들에 대해서도 알아보도록 하겠습니다. 미리보면 좋은 포스팅 !CSS 스타일시트 작성법과 선택자에 대해 알기선택자(Selector)를 통해 CSS를 적용해보자 #1 [HTML5/CSS3] span 태그 & div 태그의 차이 [HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그 이번 포스팅에서는 혼합선택자와 속성선택자에 대해서 알아보겠습니다. 1. 혼합 선택자 혼합선택자는 앞서 포스팅에서 배웠던 태그선택자/id선택자/class선택자를 혼합하여 CSS 속성을 변경하는 선택자입니다. 12345678910111213141516171819202122232425262..

[HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1

Programming/HTML&CSS Lkt_Programmer 2019. 3. 25. 14:09

안녕하세요. 저번 포스팅에서는 CSS 스타일시트 작성법과 선택자의 개념에 대해 알아보았습니다. 이번 포스팅에서는 태그를 선택하는 여러 종류의 선택자들에 대해 알아보겠습니다. [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기 1. 태그 선택자 태그 선택자는 태그명을 통해 태그를 선택하는 선택자입니다. 간단한 예로 아래의 스타일시트를 살펴 보겠습니다. 태그 내부에 정의 된 Rule-Set을 해석해보자면 다음과 같습니다. h1 태그의 border 속성값을 1px solid red로 줘라h2 태그의 border 속성값을 1px solid blue로 줘라h3 태그의 border 속성값을 1px solid green으로 줘라아래 전체적인 샘플예제와 웹페이지에 표현되는 것..

[HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기

Programming/HTML&CSS Lkt_Programmer 2019. 3. 24. 17:02

이번 포스팅부터는 CSS를 통해 앞서 배운 태그들에 스타일을 적용하여 웹 페이지를 이쁘게 표현하는 방법들에 대해 포스팅 하고자 합니다. CSS를 공부하기 전 기초 태그들에 대한 지식이 있으면 좋으므로 아래 포스팅을 참고해주세요. [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그)[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기[HTML5/CSS3] span 태그 & div 태그의 차이[HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그 1. 선택자를 통해 태그 선택하기 선택자란 선택을 해주는 요..

[HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그

Programming/HTML&CSS Lkt_Programmer 2019. 3. 23. 16:51

오늘은 div 태그를 이용해서 초간단 웹페이지 레이아웃을 구성하는 것을 살펴 보겠습니다. div 태그에 대해서는 아래 포스팅 참조 해주세요. [HTML5/CSS3] span 태그 & div 태그의 차이 1. 웹페이지 레이아웃 웹페이지는 일반적으로 Header 영역 / Navigation 영역 / Content 영역 / Footer 영역으로 나누어집니다. (모든 웹페이지가 그런것은 아닙니다) Header 영역 : 웹페이지를 나타내는 로고 또는 소개글이 위치합니다.Navigation 영역 : 웹페이지에서 다른 페이지로 이동하는 Menu Bar가 옵니다.Content 영역 : 웹 페이지의 내용Footer 영역 : 웹 페이지와 관련된 정보 그럼 이러한 4개의 영역으로 나누어지는 간단한 샘플예제를 살펴보겠습니다...

[HTML5/CSS3] span 태그 & div 태그의 차이

Programming/HTML&CSS Lkt_Programmer 2019. 3. 22. 14:24

div 태그와 span 태그는 웹 페이지의 영역을 설정 할 때 사용하는 태그입니다. 웹 페이지의 전체적인 레이아웃을 설정 할 때 사용하는 태그인셈이죠. 예전에는 table 태그를 사용하여 웹 페이지에 대한 전체적인 레이아웃을 구성하였던 반면 요즘 트렌드는 오늘 배울 div 태그와 span 태그를 통해서 구성을 하는 것이 일반적입니다. [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그) 알아보러 가기!! 그럼 div 태그와 span 태그의 차이점과 사용법을 살펴보겠습니다. 1. div 태그와 span 태그 비교 먼저 두 태그의 차이점은 줄바꿈입니다. div 태그의 경우 자동으로 줄바꿈이 되지만 span 태그의 경우네는 자동으로 줄바꿈이 되지 않습니다. 아래 샘플 소스를 참조해주세요. 12..

[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기

Programming/HTML&CSS Lkt_Programmer 2019. 3. 21. 13:27

form 태그는 웹 페이지의 내용을 다른 웹페이지 또는 웹 서버에 전송 할 때 사용됩니다. 단순히 텍스트만 보여주는 웹 페이지일 경우 필요가 없지만 데이터를 보낼 필요가 있는 웹 페이지에서는 반드시 사용해야 하는 태그입니다. 예를들어 회원가입을 하는 웹 페이지의 경우 회원가입을 위해 입력했던 정보를 서버로 전송을 해줘야지 회원가입 요청에 대한 처리가 이루어 질 수 있습니다. 1. form 태그 먼저 form 태그의 중요 속성들에 대해서 알아 보겠습니다. action : form 내부의 데이터를 보내는 url 경로를 지정합니다.method : 데이터를 보내는 방식을 지정합니다. post와 get 방식이 있습니다.action : action에 의한 새로운 웹페이지가 열리는 방식을 지정합니다. autocomp..

[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그)

Programming/HTML&CSS Lkt_Programmer 2019. 3. 20. 13:39

오늘은 웹 페이지에서 테이블 태그를 활용하여 테이블을 표현하는 방법에 대해 알아보겠습니다. 테이블 태그는 단순히 테이블을 보여줄 때 사용이 되지만 웹 페이지의 전체적인 레이아웃을 구성 할 때도 사용이 됩니다. 사실 테이블 태그의 경우는 요즘 잘 사용되지 않는 추세이긴 하지만 (웹 페이지의 레이아웃 구성도 div 태그를 활용하여 구성합니다) 그래도 모르고 넘어가면 안되기 때문에 한번 살펴보도록 하겠습니다. 1. Table 태그 기본 먼저 테이블 태그 영역에 사용 될 수 있는 하위 태그들에 대해 정리 해보겠습니다. : table을 생성하는데 사용되는 가장 상위의 태그 : 새로운 행을 시작하는 태그 : 새로운 열을 시작하는 태그기본적으로 이렇게만 알고 시작해보도록 하겠습니다. 123456789101112131..

[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그

Programming/HTML&CSS Lkt_Programmer 2019. 3. 19. 22:47

웹 컨텐츠에서 제목을 작성하는 h 태그와 다른 웹페이지로 이동을 시켜주는 하이퍼링크 인 a태그에 이어서 오늘은 리스트 태그와 이미지 태그에 대해서 정리해보도록 하겠습니다. [Programming/HTML&CSS] - [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자[Programming/HTML&CSS] - [HTML5/CSS] HTML과 CSS 기초 개념 이해하기 1. 리스트 태그 - 태그 html에서는 목록을 작성 할 수 있는 태그들이 있는데요. 먼저 ul 태그에 대해서 살펴 보겠습니다. ul 태그는 unordered list의 약자로 순서가 없는 리스트를 작성 할 때 사용됩니다. 순서가 없기 때문에 글머리 기호를 사용해서 나타내는게 특징입니다. 태그의 경우는 사이에 정의..

[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자

Programming/HTML&CSS Lkt_Programmer 2019. 3. 19. 15:56

오늘부터 HTML에서 사용하는 태그들에 대해서 하나씩 정리해 나가도록 하겠습니다. 오늘 게시글 주제는 컨텐츠에서 제목을 표현하는 h태그와 본문 내용을 작성 할 때 사용하는 a 태그에 대해서 알아보도록 하겠습니다. 1. 제목 요소에 해당하는 h 태그 H 태그들은 웹 페이지의 컨텐츠 내에서 제목을 표시 할 때 사용하는 헤드라인 태그입니다. 컨텐츠내에서 제목을 작성 할 때 사용되는 태그들로 웹 페이지의 내용만큼이나 중요한 요소입니다. h 태그는 h1을 시작으로 h6까지 있으며 상위번호로 갈수록 글자크기가 작아집니다. 보통 h1 태그가 웹 페이지 컨텐츠상에서 주 제목을 쓸때 쓰이며 h1을 제외한 상위번호를 통해 부제목을 작성을 하게 됩니다. 태그 사용방법은 앞서 게시글에서 얘기했던대로 제목 요소 와 같이 사용하..

맛있는 프로그래머의 일상