C언어 예술가

선택자라는 단어의 의미를 짚어보면 타겟이 있어야 한다는 것을 알 수 있다. id선택자, class 선택자, 태크 선택자는 각 타겟들이 요소의 속성인 id, class, tag가 된다.하지만 가상 클래스 선택자, 또는 가상요소선택자는 언뜻 이해가 안되기도 한다. 왜 가상, 요소가 붙었나..그럼 좀 더 의미를 되새겨보자.DOM에서 요소는 실체가 있는 것들이다. 그리고 클래스나 id는 출생년도나, 주민등록번호처럼 요소를 카테고리할 수 있는 속성으로 볼 수 있다. 분명 이 둘은 다른 것임을 알 수 있다.가상클래스는 이런 속성이 실제로 마크업 상에 명시되지는 않은 속성을 지칭하는 말이다. 예를들어 마우스를 올려놓았을 때나 클릭을 했을 때를 하나의 속성으로 본다는 것이다. 이런 속성들은 사용자가 만드는 행동이라 그..

안녕하세요. float는 정말 자주 사용하는 속성입니다. float를 태그요소에 적용하면 block 속성을 없애버리는 특성을 가졌습니다. 그리고 자신의 크기만큼만 공간을 차지하며 투명인간처럼 무시되게 되는 속성입니다.이에 대한 자세한 설명은 제 블로그의 다음 글을 html css float 속성 정리 참고하시길 바랍니다.아무튼 이런 성질로 인해 다음 요소들이 딸려서 위로 올라오게 됩니다. 보통 웹 페이지의 네비게이션 바의 메뉴를 float:left 로 많이 만들어서 잘못해서 아래 요소들이 딸려올라오는 문제을 자주 겪는 것 같습니다.제 경우는 메뉴바 또는 기타 웹의 전체 구성 등을 만들 때 diplay: flex;를 사용해서 float를 자주 쓸일이 없습니다. 개인적으로 flex는 반응형 웹을 깔끔한 코드..

css overflow 속성에 대한 이해의 전제 조건 : html 요소의 box모델에 대한 이해, float 속성에 대한 이해.사실 html/css의 여러 요소간에 상호작용은 이론을 배운 것 처럼 간단하지 않다. 어떤 속성이 모든 요소에 적용되는 것은 아니며 또는 요소간 상호작용 역시 상대적으로 일어난다. 또는 요소에 적용된 속성이 바뀌면 요소간 상호작용 성격도 변하기도 한다. 이런 복잡함으로 인해서 많은 경험만이 답인 듯 싶다.css overflow에 대한 내용을 설명하기 전에 우선 float 속성을 사용했을 때 일반적으로 우리가 간과하기 쉬운 현상을 한가지 소개하고 설명을 이어가겠다.다음 그림은 html 코드와 결과인데 어떤 CSS 코드가 적용되었는지 생각해 보도록 하자.css float 속성과 ov..

html 가운데 정렬 방법은 html 문서의 레이아웃을 잡는데 많이 쓰이는데 정말 다양한 방법이 있다. 이 방법들을 모두 알 필요는 없는데 이것은 마치 서울역에서 용산역까지 가는 방법과 마찬가지기 때문이다. 아마 서울역에서 미국까지 갔다가 다시 한국으로 와서 용산역까지 가는 것도 하나의 방법일 수 있기 때문이다.html 상에서 가운데 정렬을 하는 것은 브라우저를 기준으로 잡던지, 아니면 부모요소를 기준으로 잡던 기준이 되는 요소 내부 공간의 중앙에 표시하는 것이다. 따라서 어떤 방법을 쓰던지 가운데에 위치만 시키면 되기 때문에 다양한 방법이 존재한다.모든 방법을 다 나열할 수는 없겠지만 그래도 가장 심플하고 최적화된 방법이라 생각되는 것들 몇가지만 정리하려고 한다.html/css 가운데 정렬가운데 정렬 ..

html 문서에서 같은 형태의 요소들이 반복될 때, 그리고 이 요소들을 특정 순서에 따라 CSS 속성을 다르게 지정하고 싶을 때 nth-child 선택자를 사용해서 해결할 수 있다. 그런데 nth-child 선택자는 그다지 친근한 형태의 이름이 아니라서 어려워 보인다. 하지만 의외로 간간히 쓰이는 구석이 많은 녀석이므로 확실하게 한번에 이해하고 넘어가도록 하자. child 선택자의 종류는 여러가지가 있다. 가장 많이 사용하는 선택자가 nth-child 선택자이며 only-child, first-child, last-child, nth-last-child가 있다. 비슷한 녀석중에 nth-of-type와 그 똘마니들.. 선택자들가 있는데 이녀석에 대한 이야기는 나중으로 미루겠다. 선택자 이름이 왜 ~ chi..

지금까지 많은 태그들을 살펴보았지만 오늘 살펴볼 메타태그는 웹 사이트의 검색 최적화와 관련된 중요한 태그다. 메타(meta)라는 말의 의미는 다양하지만 여기에서 메타는 "정보를 설명하는 정보" 정도가 적당할 듯하다. 다시말해 HTML 문서는 웹에서 어떤 정보를 전달하기 위한 형태의 문서이며 메타태그는 HTML 문서가 어떤 문서인지에 대해서 설명하거나 추가적인 정보를 알리기 위해 사용되는 태그다.비유하자면 HTML 문서가 책이라면 메타 태그는 책의 겉 표지라고 볼 수 있겠다. 책의 겉 표지는 책의 제목과 가격, 지은이, 책을 대표하는 그림 등의 정보가 있어 책이 어떤 성격의 책인지를 쉽게 파악할 수 있도록 만든다. 마찬가지로 메타태그 역시 HTML 문서가 어떤 정보를 포함하며 어떤 성격의 문서(사이트)인지..

이번에 정리할 HTML 태그는 select입니다. 모든 학문이 그렇지만 특히 프로그래밍 공부는 이름으로부터 쓰임새를 유추하는 습관을 들여야 학습 효율이 높아짐니다. select 태그는 말 그대로 다양한 선택지 중에서 선택을 하는 드롭박스를 만드는 태그입니다. 물론 선택을 하는 사람은 웹페이지를 보고 있는 사용자 입니다. 그리고 선택된 내용은 일반적으로 웹서버로 전송해야 하겠죠. 앞서 우리는 input 태그를 공부한 적이 있습니다. input태그 역시 사용자 입력을 받는 다양한 type들을 지정하여 사용했었습니다(text, password 등등). 이렇게 사용자로 부터 입력받은 데이터들을 서버로 전송하려면 form 태그가 필요합니다. 구체적으로 form태그로 사용자 입력을 받는 태그들을 감싸주면 되는 것이..

웹 페이지 상에서 다단을 나누는 경우는 큰 포탈 정도인 것 같다. 한 페이지에 많은 섬네일을 보여주기 위해서 다단을 나누거나 한다. 생각보다 많이 쓰이지는 않는 것 같은데 이건 나의 웹관련 실무적인 경험이 부족한 탓이라 생각든다. 다단을 나누기 위해서는 CSS를 사용해야 한다. 다단을 만드는 방법과 css 속성 중에 break-after, break-before 등이 어떻게 동작하는지도 살펴볼 생각이다. 내가 인터넷을 뒤져본 결과 이 속성(break-*)을 명확하게 정리해 놓은 곳은 못찾았다. 그래서 자세히 정리해 보려 한다. 예전에 flex 레이아웃을 공부한 적이 있었는데 다단과 약간 비슷하다고 생각할 수 있겠다. 따라서 반응형 웹에서 레이아웃을 잡는 용도로 다단을 사용할 수 있을까? 하는 쓸데없는 생..

텍스트나 이미지에 링크를 거는 방법은 a 태그를 사용하면 된다. 텍스트에 링크를 걸려면 a 태그로 해당 텍스트를 감싸주면 되고 이미지에 링크를 걸려면 a 태그로 이미지 태그를 감싸주면 된다. 그런데 인터넷 속도가 빨라지면서 사이트의 메인이나 페이지의 대부분을 이미지로 만들어서 여기에 멀티 링크를 거는 경우가 있다. 이게 바로 이미지 맵을 이용한 것인데 이미지 맵을 이용하면 링크를 걸 이미지들을 쪼갤 필요없이 하나의 통짜 이미지를 사용할 수 있다. 이미지맵, 말은 거창한 듯 하지만 단순히 map이라는 태그를 사용한다.map 태그는 이미지 맵을 만드는 태그며 원본 이미지를 표시하는 img 태그와 별도로 작성한다. 그리고 img 태그에서 사용할 map 태그의 이름을 지정하면 된다.이런 컨셉을 간단히 그림으로 ..

HTML에서 이미지 삽입을 위한 태그는 img 태그다.그런데 이미지 태그는 단독으로 쓰이면 아무 소용이 없기에 부수적으로 따라오는 속성들이 있어야 한다.어떤 이미지를 삽입할 건지 알려주는 src라는 속성이 당연히 있어야 하겠고 이미지의 사이즈를 조절하기 위한 width, height 속성이 필요할 수도 있다.또는 이미지 링크가 깨졌을 경우 깨진 이미지 대신 텍스트로 대체하기 위한 alt 속성, 이미지 위에 마우스를 올려 놓았을 때 이미지에 대한 설명을 툴팁(말풍선) 형태로 보여주는 title 속성 등이 있다.지금부터 하나씩 정리해 보겠다.src 속성 src는 source의 축약어로 이미지 파일의 위치를 정하는 속성이다. 위 코드는 로컬(local) 상에서 테스트 하는 코드이므로 html파일과 이미지파일(..