C언어 예술가

CSS를 사용하여 드롭다운 메뉴를 만드는 방법을 설명하겠습니다.드롭다운 메뉴를 만들기 위해서는 지금까지 제가 블로그에 올린 내용들에 대해서 어느 정도 이해하셔야 합니다.특히 position 속성, float 속성 등과 태그간에 부모, 자식 관계에 대해서 꼭 이해해 두셔야 합니다. 그렇지 않으면 상위메뉴와 하위메뉴가 만들어지는 과정을 이해하기 힘들 수 있습니다.드롭다운 메뉴는 메인메뉴->하위메뉴 이런 형식으로 이루어져 있고 ul태그를 사용하여 만들어집니다. 드롭다운 메뉴를 만드는 것은 어렵지는 않지만 신경쓸 부분이 좀 있는데 지금부터 하나씩 살펴보겠습니다. 그리고 이 강의는 디자인적인 요소를 전혀 고려하지 않고 드롭다운을 만드는 핵심만 알려드립니다.css 드롭다운 메뉴 만들기다음과 같이 ul, li 태그로..

웹 사이트에서 사용자가 입력한 정보를 서버로 전송하는 형태의 레이아웃을 만들 때 사용되는 태그들이 있습니다. 그 중 사용자의 입력을 받는 레이아웃을 만드는 input 태그가 있습니다.input 태그로 만들어지는 가장 흔한 예로 아이디, 비밀번호를 입력하는 상자가 있습니다.이렇게 input 태그로 생성되는 한 줄 짜리 입력을 받는 상자죠.그런데 사용자의 입력을 받는 형태는 텍스트를 받는 상자만 있는 것이 아닙니다. 예를들어 체크박스나 라디오 버튼, 그냥 버튼 등 다양한 형태가 될 수도 있습니다. 이런 형태를 지정할 때는 type속성을 사용하면 됩니다.또한 아디와 비밀번호를 입력할 때 아이디에 입력된 텍스트는 그대로 보여지는 반면 비밀번호에 입력되는 텍스트는 "*****"와 같은 형태로 가려져 보이지 않습니..

스마트폰, 태블릿 등 다양한 미디어 디바이스의 등장으로 인터넷은 PC에서 뿐만아니라 다양한 모바일 기기에서 손쉽게 사용이 가능해졌습니다.분명 인터넷 사용은 더 편리해 졌지만 개발자의 입장에서는 다양한 크기의 디바이스 화면에 맞는 웹페이지를 따로 만들어야 하는 고충이 생겼습니다. 커다란 PC화면에서 보여지는 페이지를 스마트폰 같은 작은 기기에서 그대로 사용하는 것은 단순히 화면이 축소되어 보이기 때문에 폰트나 이미지의 크기가 어색해 보일 수 밖에 없기 때문입니다. 또한 스마트폰 같이 작은 디바이스에서 보여지는 화면은 PC 화면에서의 복잡한 인터페이스 보다는 단순한 인터페이스로 설계되어야 할 필요가 있습니다.CSS의 미디어쿼리(media query)를 사용하면 화면의 해상도에 따라서 페이지를 다르게 보여줄 ..

우리가 알고있는 일반적인 태그들(div, p, a)은 각각 특정한 기능을 가진 태그인 반면 시맨틱 태그는 기능을 위한 태그가 아니다. 있으나 없으나 문서의 모습이나 형태가 변하지 않는다.시맨틱(semantic) 태그란 단어 의미대로 의미론적 태그다.따라서 시맨틱 태그를 이해하려면 지금까지 알아온 태그와 달리 추상적으로 바라볼 필요가 있다.예를들어 대학 건물을 짓는다고 생각해보자. 건물만 지어놓고 건물에 이름을 만들지 않아도 기능적으로는 아무런 문제는 없다. 강의실을 사용할 수도 있고 컴퓨터 실습실도 사용할 수 있다. 다만 처음 오는 사람은 무엇이 어디에 있는지, 어떤 기능을 하는 건물인지 직접 들어가봐야 알 수 있다. 따라서 건물에 공대건물, 법대건물, 도서관 건물 등과 같이 이름을 써놓으면 처음 오는 ..

기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox 가 생겨났다. flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.기본 컨셉은 아주 명확하기 때문에 기존의 레이아웃을 만드는데 사용하던 table 태그나 position 또는 float 속성을 사용하는 방법의 복잡함을 고수할 필요가 없어졌다.다만 생각보다 다양한 속성들이 있어서 정리할 필요는 있다. 이 속성을 모두 사용할 필요는 없으므로 대략적인 이해만 해 둔 후에 필요할 때마다 참고하여 레이아웃을 만들면 될 것이다.flexbox의 기본 컨셉container와 item들이 부모와 자식관계일 때 container에 display : flex; 속성을 줌으로서 다음과 같은 모습의 ..

Cascading은 작은 계단모양의 폭포를 말합니다. 폭포의 전후로 물의 높낮이가 바뀌겠죠. 연속적인 물의 흐름에서 높낮이 차이를 우선순위에 비유한 것 인듯 싶습니다. CSS(Cascading style sheets)의 C는 Cascading의 약자입니다. CSS의 뜻을 살펴보면 우선순위가 있는 스타일 시트라는 뜻이군요. 구체적으로 하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정된다는 뜻입니다. 속성을 적용하다보면 하나의 태그에 본의 아니게 같은 속성이 겹쳐 적용될 때가 있을 겁니다. 단편적인 예제를 통해서 CSS를 공부할 때는 이런 경우가 그다지 발생하지 않으므로 Cascading에 대해서 깊게 생각하지 않아도 될지 몰라도 완성도 있는 HTM..

박스모델을 공부한 후부터 지금까지 사이트 레이아웃을 만드는데 필요한 중요한 속성들을 계속 살펴보고 있습니다.이번에 다룰 float 속성도 레이아웃을 잡는데 쓰이는 속성으로 기본 개념은 단순하지만 기본 개념만으로는 동작방식을 예측하기 힘든 경우가 있어서 케이스별로 정리해서 이해할 필요가 있습니다.저도 천천히 공부하는 입장이고 경험적이고 실험적인 설명도 있으므로 혹시 틀린점이 있다면 댓글 부탁드립니다. float 속성float의 뜻은 "뜨다", "흐르다" 뭐 이런 뜻입니다. 단어의 의미가 이 속성과 딱 매치된다고 말은 못하겠습니다. 그래도 단어의 뜻으로 이 속성을 설명해 보자면 이렇습니다."float 속성을 갖는 요소는 html 문서에서 공간은 차지하되 다른 요소의 배치에 영향을 안주는 요소가 된다."이건 ..

이번 포스팅은 태그 요소의 위치를 설정하는 속성에 대한 이야기를 해보겠습니다. 앞서 박스모델에서 태그요소간에 상호작용에 의해서 위치가 결정된다고 했습니다.맞긴 하지만 지금까지는 태그 요소를 위치하는 방법 중에 한가지만 살펴본 것입니다.위치를 결정하는 속성은 position인데 이 속성을 지금까지 설정하지는 않았습니다. position 속성을 주지 않으면 디폴트로 static이라는 속성값이 부여됩니다. 그러면 지금까지 static 속성값으로 위치를 정한 것이 되네요.position 속성position 속성이 가질 수 있는 속성값에는 다음과 같은 4가지가 있습니다.static : position 속성을 부여하지 않았을 때 가지는 디폴트 값. relative : 현재 위치에서 상대적인 offset 속성을 줄 ..

저번 시간에 박스모델에 대한 공부를 하면서 HTML 태그 요소들이 문서내에서 어떻게 배치되는지에 대해서 살펴보았다. 이를 결정하는 속성 다섯가지(width, height, padding, border, margin)에 대해 살펴보았었는데 오늘은 이 규칙의 기준을 바꿀 수 있는 box-sizing이라는 속성을 살펴보고, 더 나아가 태그 요소들 간에 margin이 어떻게 적용되는지에 대해서도 살펴보겠다.저번 시간에 이어서 매우 중요한 내용이므로 반드시 이해하고 넘어가야 한다.box-sizing 속성박스모델에서 태그 요소들을 둘러싼 4개의 층으로 된 박스들은 앞에서 언급한 5가지 속성에 의해서 결정된다. 그 중 width와 height 속성은 가장 안쪽에 있는 내용(content)의 가로와 세로 사이즈를 결정..

박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.박스모델그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5..