도란도란 세상 사는 이야기 :)

화면에 어떻게 보일 것인지를 지정하는 속성을 [가시속성] 이라고 합니다. 가시속성에는 display속성, visibility속성, opacity속성이 있으며 오늘은 display 속성에 대해 정리해보도록 하겠습니다. display 속성에는 다양한 속성들이 있지만, 아직 이 속성들을 제대로 지원하는 웹 브라우저가 많지 않습니다. [모던웹을 위한 HTML5+CSS3 바이블 3판] 책에서 소개하는 중요한 키워드 네 가지를 실습해보도록 하겠습니다. 일단 display에 있는 주요 속성들을 살펴보도록 하겠습니다. 위의 표는 제가 제 나름대로 실습해보고 이해한 내용으로 정리하였으니, 오류가 있을 수도 있다는 점 알려드립니다. 따라서 책의 내용도 아래 첨부하겠습니다. 혹시 이 책으로 공부하시는 분들이 계시다면, di..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 19. 17:30

CSS의 속성을 하나씩 살펴보기 전에, 단위를 먼저 알고 들어갑니다. 물론 vicual studio code에 입력하다 보면 자연스럽게 익힐 수 있지만, 저에게 생소한 단위들이 있어 눈에 익히기 위해 정리하려고 합니다. * 한빛미디어 '모던 웹을 위한 HTML5+CSS3바이블 3판'을 기본 바탕으로, 나름대로 재해석하여 정리하였습니다. 단위의 종류 CSS 단위는 크게 세가지로 나눌 수 있습니다. (키워드 단위는 너무 많기 때문에 생략) 아는 단위가 많을 수도 있지만, 저에게는 생소한 단위들이 보입니다. 하나씩 간단히 정리하도록 하겠습니다. 크기 단위 책에 의하면 위의 표 중에서도 더 많이 사용하는 크기 단위는 %, em, px이라고 합니다. 1) % (퍼센트) 상대적 크기 단위 입니다. 초기 설정된 크기..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 13. 17:55

CSS3 기본 선택자 정리 * 전체를 선택해라 - body 태그 내부 요소뿐만 아니라, html 태그를 포함해 head 태그, title 태그, style 태그까지 모두 선택한다. #(만들어준 id속성 이름) body 안에서 지정해준 id를 선택해라 .(만들어준 class속성 이름) body 안에서 지정해준 class를 선택해라 태그이름 이 이름의 태그를 선택해라 - 아무런 기호 없이 태그 이름을 입력하면, 그 자체로 선택자(Selectors)가 된다. 태그이름[속성이름] 이 속성이 있는 태그를 선택해라 태그이름[속성이름=속성값] 이 속성의 이 속성 값을 가진 태그를 선택해라 A B A태그 하위에 위치한 모든 B태그를 선택해라 A > B A태그 바로 하위에 위치한 B태그들만 선택해라. A + B 동일한 ..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 11. 09:00

CSS는 Cascading Style Sheets의 약자입니다. 간단하게 말해서 웹 문서를 꾸며주는 부분이라고 생각하면 됩니다. HTML 태그가 웹 문서를 구성하는 기능이라면 CSS는 HTML 웹 문서를 꾸며주는 기능인셈이죠. 오늘은 CSS의 선택자중에 [자손 선택자, 후손 선택자, 동위 선택자]에 대해서 알아보도록 하겠습니다. 선택자(Seletors) 먼저 선택자 라는것에대해 확실히 개념을 알아두어야 합니다. 물론 자연스럽게 알게 되는 개념이지만, 처음 접하는 사람에게는 모든 것이 어렵습니다. '선택자'는 Selectors의 번역입니다. 풀어서 설명하면 입니다. 결국 선택자가 있어야 원하는 부분을 꾸며줄 수 있는 것입니다. 예를 들어 "나는 제목의 글씨를 파란색으로 바꾸고 싶어" 라고 했을 때, CSS..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 9. 09:15

안녕하세요 도란입니다. 오늘은 티스토리 Magazine 스킨의 메뉴바 크기 변경하는 방법을 알려드리도록 하겠습니다. 우선 저는 깔끔한 화면 구성 때문에 Magazing 스킨을 선택해서 사용하고 있습니다. 하지만 이 Magazine 스킨에서 조금 불편하다고 느끼는 부분이 있었는데요, 바로 [메뉴바] 부분이었습니다. 메뉴 버튼을 눌렀을 때 전체 화면을 덮어버리기 때문에, 메뉴를 누르면 블로그 화면을 미리 볼 수가 없었습니다. 기존 Magazine 화면 블로그에서 우측 상단 메뉴를 누르면 메뉴창이 아래 이미지와 같이 전체 화면을 가리게 됩니다. 오늘은 이 메뉴바의 크기를 줄이로 오른쪽으로 이동시켜보겠습니다. 메뉴바 상단 타이틀(Title) 숨기기 메뉴바를 줄이고 블로그화면을 미리 볼 수 있게 되면, 블로그 타..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 7. 18:59

HTML5의 기본 태그 1번 크기의 제목 태그 2번 크기의 제목 태그 3번 크기의 제목 태그 4번 크기의 제목 태그 5번 크기의 제목 태그 6번 크기의 제목 태그 *1번이 가장 큰 크기 글자를 굵게 하는 태그 글자를 기울게 하는 태그 글자에 줄이 그어지는 태그(취소선) 글자에 밑줄이 그어지는 태그 글들의 문단을 구분해주는 태그 글의 줄을 바꿔주는 태그 (엔터 같은) 선을 그어주는 태그 어떠한 위치로 이동하는 태그(앵커 태그) * 반드시 href라는 속성과 함께 사용해야 함 리스트를 순서대로 나열해주는 태그 리스트를 나열해주는 태그 리스트 안에 요소를 나타내 주는 태그 표를 의미하는 태그 *이 태그 안에서 표를 만들어 줄 수 있음 가로 행 한 개를 의미하는 태그 * 태그가 세 번 나오면 표의 행이 3개라는..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 6. 11:59

오늘은 HTML5를 공부하기에 앞서 HTML5의 기본적인 용어를 알아보도록 하겠습니다. 책에서는 보통 한글로 용어들을 표현하고 있지만, 실무에서는 보통 영어로 이야기한다고 합니다. 그래서 저도 익숙해질 수 있도록 영어와 한글을 동시에 사용하도록 하겠습니다. 입문자 기준으로 의미만 전달할 수 있게 통틀어 설명하였으므로 약간 비약된 해석이 있을 수 있으니 고수분들은 패스해주세요ㅎㅎ Code (코드) 우리가 입력하는 모든것을 코드라고 합니다. 웹이나 프로그램에서 사용하는 텍스트의 통칭이라고 할 수 있죠. 그래서 코드를 입력하는 행위를 코딩이라고 하고, 그 행위를 하는 사람을 코더라고 부릅니다. Tag (태그) 이런 것들을 혹시 보신 적 있나요? 태그는 바로 이런 것들(?)입니다. 웹 브라우저가 인식할 수 있도..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 5. 16:05

본 글은 HTML 입문자를 위한 글입니다. 매우 기본적이 내용이기에, 고수분들은 패스해주세요. HTML 뒤에 붙어있는 이 숫자 5가 궁금합니다. 다섯번째라는 의미인 건 알겠는데 무엇이 다섯 번째일까요? HTML 은 Hypertext Markup Language의 약자입니다. 이것 또한 어렵다면 입문자에게 HTML은 [웹이 읽는 문서]라고 쉽게 표현해보면 어떨까 싶습니다. 우리가 표현하고자 하는 것을 텍스트로 문서를 만들어서 웹에게 알려주면, 웹이 그 문서를 읽고 표현해내는 것입니다. 그리고 그 HTML이라는 문서를 표준화하는 일을 W3C라는 재단에서 하고 있습니다. 이 표준은 꼭 해야 하는 명령 같은 것이 아니라, 약속처럼 권고사항입니다. 모든 웹 브라우저가 이 표준을 지켜야 하는 의무는 없지만, 202..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 4. 08:30

우리가 흔히 사용하는 WWW는 월드 와이드 웹(World Wide Web)의 줄임말입니다. 월드 와이드 웹 이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간을 말합니다. 인터넷과 웹은 다르다? 인터넷은 전 세계를 연결하고 있는 국제 정보 통신망을 뜻하고, 웹은 인터넷 위에서 작동하는 서비스 개념입니다. 인터넷의 시작 1969년 미국이 핵과같은 공격에 대비하기 위해 통신시스템에서 데이터를 안전하게 보관 및 전송할 수 있도록 한 시스템에서 시작되었습니다. 처음에는 미국의 국방성과 대학교를 연결하는 것에 그쳤지만, 점점 민간 연구용 네트워크가 생기고, 그 민간용 네트워크가 오늘날 현재의 인터넷으로 발전되었습니다. 이것을 만들어낸 핵심 개발자인 팀 버너스 리가 1991년에 WWW를 개발..

IT테크 프로그램 어플/HTML & CSS 2020. 3. 3. 21:10