선우공작소

궁금해요! 너를 알려줘! 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..

안녕하세요. 선우에요:D 사이트에 올라온 이미지들은 웹서버에 업로드하여 관리하는데요.이 때 다른 파일에 비해 이미지 용량이 꽤 큰 경우가 많죠.개인적으로 사이트를 가지고 있다면 용량에 더 신경쓰게 되구요. 그래서 준비했습니다.이름하야 이미지 용량을 제법 줄여주는 무료 사이트!!TinyPNG 실제로 제가 사용하고 있는 사이트 입니다.사용한 지 2년 정도 되었구요.조금 더 빨리 알았다면 알게된 순간부터 계속 사용했을 정도로 유용한 사이트라 생각합니다.강력 추천:D 위의 이미지는 TinyPNG 사이트 메인 화면입니다.아래 설명글을 읽어보면 TinyPNG는 스마트 손실 압축 기술을 사용하여 파일 용량을 줄여준다고 하네요.스마트 손실 압축 기술이 뭔지는 모르겠지만..이름부터 좋아보이네요. 사용하는 방법은 메인 화..

궁금해요! 너를 알려줘! 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..

안녕하세요. 선우에요:D 제 직업 상 종종 아이콘이 필요할 때가 있는데요. 그렇다고 만들자니 시간도 촉박하고, 퀄리티도 떨어질 때 아주 유용하게 이용할 수 있는 사이트를 소개합니다. FALTICON 위의 텍스트 클릭시 새창으로 이동됩니다. 워낙 유명한 사이트라 다들 알고 계실 수도 있는데요. 제가 다시 한 번 정리해 보도록 하겠습니다! 우선 사이트 제일 처음, 메인 화면입니다. 2016년 12월 28일자 280,601개의 백터 아이콘이 있다고 하네요. 어마무시 하죠? 퀄리티도 고퀄이라 어디든 사용할 수 있습니다. 원래는 회원가입없이 이용할 수 있었는데 유료 아이콘이 생기면서 회원가입이 필요합니다.단, 하나의 아이콘만 필요할 경우 별도의 로그인 없이 다운로드 가능합니다. 우측 상단의 사람 모양 아이콘을 클..