선우공작소

궁금해요! 너를 알려줘! display 안녕하세요. 선우에요.지난 번 CSS를 배웠으니 그 중 제일 중요한 프로퍼티 display를 배워보려해요.display는 무엇을 의미할까요? 맞아요! 전시하다 내보이다라는 뜻을 가지고 있어요.이 뜻만 기억하고 있으면 문제없이 html 진도나갈 수 있어요.그럼 시작해 볼까요? displaydisplay는 CSS에서 제일 중요한 프로퍼티에요. 왜 중요하냐구요?바로 모든 엘리먼트의 속성을 부여해 레이아웃을 제어할 수 있기 때문인데요.여기서 말하는 엘리먼트란 태그를 의미하기도 합니다. 엘리먼트가 더 큰 단위의 개념이니까요.엘리먼트에는 display 속성이 디폴트로 블록(block) 또는 인라인(inline)이 들어가 있는데요.속성에 대해서는 아래에서 배워보도록 할게요. 지..

궁금해요! 너를 알려줘! CSS 안녕하세요. 선우에요. 총 3차례에 걸쳐 HTML에 대해 포스팅 했는데요. 비록 기초적인 부분이지만, HTML의 기본 구조정도는 그릴 수 있다고 생각합니다. 혹시 HTML5 구조를 코딩하기 어려운 분이 있다면 HTML 카테고리의 궁금해요! 너를 알려줘! HTML5의 시맨틱 구조 글을 참고해 주세요. 위의 포스팅에서 구조에 대한 이해와 예시 소스를 보시면 될 것 같습니다. 그럼 그 가정하에 CSS에 대해 배워볼까요? 공부야 말로 들어올 때는 마음대로 였겠지만, 나갈 때는 아니란다. 입문은 밥 먹듯이 하는데, 나갈 수가 없네. 크흑.. CSS란 무엇일까요? CSS란 Cascading Style Sheets의 약자로 W3C의 표준이며, 주로 HTML, XHTML에서 레이아웃과 ..

궁금해요! 너를 알려줘! HTML5의 시맨틱 구조 안녕하세요. 선우에요:D 드디어 HTML5의 구조를 설명하는 포스팅을 쓰네요. 사실 구조를 배우기 전 MIME타입이나 문자 인코딩 설정하는 방법 같은 기초적인 부분을 배워두면 좋지만, 그 전에 흥미를 잃을 것 같아 그 부분은 나중에 포스팅하도록 하겠습니다. 나중에 알아도 되는 부분이니 따로 찾아보거나 하실 필요는 없어요. 재미를 가질 때 쯤, 포스팅 하도록 할게요. 우선은 눈으로 보여지는 화면을 만들어 흥미유발 좀 해볼까요!? 코딩하기 전, 각 시맨틱 태그들에 대해 어느정도 알아야 하니 설명 들어갑니다. HTML4와 HTML5의 차이점은? HTML4와 HTML5의 차이점은 무엇일까요? 제일 중요한 Content Model! Content Model이란 H..

궁금해요! 너를 알려줘! DTD 안녕하세요. 선우에요.저번 포스팅에서 HTML을 공부해 봤는데요.순차적으로 가는 것이 좋을 것 같아 DOCTYPE 정의 및 선언에 대해서 포스팅해 볼게요. 여기서 잠깐! 웹 브라우저는 2가지 렌더링 모드를 지니고 있는데요.쿼크모드(Quirks mode)와 표준모드(Standard mode)로 나뉘며,DTD 선언하지 않고 만들 만드는 것을 비표준 모드인 쿼크모드라 합니다. 쿼크모드에서는 같은 코드라도 웹 브라우저마다 서로 다른 결과물을 보여줄 수 있기 때문에 표준모드 사용을 권장합니다! 표준모드는 DTD를 선언해 주기만 하면 됩니다.여기서 DTD(document type definition)란 말 그대로 문서의 타입을 정의하는 것을 말해요.어디에? HTML 최상단에!! 이 ..

궁금해요! 너를 알려줘! HTML 안녕하세요. 선우에요. HTML을 배우기에 앞서 먼저 HTML이 무엇인지 알아보는 시간을 잠시 갖도록 할게요. 첫 포스팅에서는 크게 HTML 정의와 구조, 태그, 공통적인 특징들을 설명할건데요. 지금 아래의 글을 모두 이해하실 필요는 없어요. 시간이 지나면 자연스럽게 알게될 내용들이기 때문이죠. 첫 술에 배부를 수는 없으니까요! 그냥 HTML이란 이런 것이구나 혹은 이런 게 있구나 하고 넘어가시면 됩니다. 그럼 이제 첫 술 한 번 떠볼까요? HTML로 배부를 그 날을 위하여! HTML이란 무엇일까요? HTML이란 Hyper Text Markup Language의 약자로 W3C(World Wide Web Consortium)에서 하이퍼 텍스트를 작성하는데 가장 기본적인 언..

선택자(selector)의 종류 이름 예시 설명 공통 선택자 * 전체 요소 선택 = All 타입 선택자 div 해당 요소(div)의 전체 하위 선택자 div p 해당 요소(div)의 일치하는 전체 하위 요소(p) 자식 선택자 div > p 해당 요소(div)의 인접하는 하위 요소(p) 클래스 선택자 div.css 해당 요소(div)의 일치하는 class 값 아이디 선택자 div#id 해당 요소(div)의 일치하는 id 값 1) 공통 선택자전체 요소를 선택한다.단 모바일에서 적용되지 않는다. 2) 타입 선택자타입 선택자가 div일 경우, div의 모든 요소를 가르키며, 기본값으로 지정된다. 3) 하위 선택자하위 선택자가 div p일 경우, div의 안에 있는 하위 요소 p를 모두 가르킨다.p의 부모가 di..