본문 바로가기
반응형

🎪 놀고있네148

[CSS] Box Model - 기본 요소 안녕하세요 냥장판 입니다 지난 게시글에 이어서 CSS에 Box Model에 대해서 알아볼게요. HTML에는 태그/요소들이 있죠. (둘이 같은말입니다) 모든 요소들은 공간을 차지하고, 이 면적을 결정하는 데 필요한 개념이에요. CSS box model은 위의 그림처럼 4개의 속성들로 이뤄져있어요 Content – The text, image, or other media content in the element. Padding – The space between the box’s content and its border. Border – The line between the box’s padding and margin. Margin – The space between the box and surroundin.. 2020. 1. 30.
로케일(Locale) 이란? 목표: 로케일 요소에 대해 파악하고, CLDR에 대해 알아보자 안녕하세요 냥장판 입니다 🐱‍👤🐱‍👤 이번 게시글에서는 여러 국가에 날짜, 시간 등을 로케일(Locale) 요소를 검색할 때 유익한 개념을 알려드리려고 합니다. 천천히 잘 따라와 주길 바랍니다. 우선 로케일 요소에는 날짜, 시간, 달력, 소수점, 환율 등 여러가지 요소가 존재한다. 1. 날짜, 시간(Date & Time) 해외에서 구입한 화장품이나 식료품의 유통기한이 연도를 말하는지, 월을 말하는지 모를 때가 있었을 것이다. 년도라도 써있으면 감으로 맞추겠지만 그렇지 않은 경우들이 더 많다. 한 예로 같은 영어권 국가에서 날짜를 표시하는 방식이 다르다는 것을 경험한 적이 있는지 모르겠다. 2020년 1월 10일에 대해 표기하는 방법이 국가마다.. 2020. 1. 29.
[CSS] CSS에서 Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 CSS와 HTML에 적용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 안녕하세요 냥장판 입니다 이번 시간에는 CSS에 Google Fonts를 적용하는 방법에 대해 알아볼거에요. CSS파일 없이 HTML에만을 사용해서 Google Fonts를 적용하고 싶다면 아래 게시글을 참고하세요 2019/11/21 - [기타] - [Font] Google Fonts 사용하기 [Font] Google Fonts 사용하기 목표: Google에서 제공하는 Web Font를 사용해보자 요약 Google Fonts 접속 Language 선택 폰트 선택 코드 복사 1. Google Fonts 접속 Google Fonts URL: https:.. 2020. 1. 23.
[CSS] CSS 선택자 사용법 안녕하세요 냥장판 입니다 CSS는 HTML과 같은 마크업언어의 디자인을 위한 언어에요. CSS도 기본 문법이 존재하고, 그 문법을 기반으로 HTML과 연결됩니다. 이번 게시글에서는 선택자를 사용하는 방법에 대해서 알려드릴게요. 1. 선택자 사용 방법 기본 개념은 HTML의 태그 값을 선택자에 가져다가 쓰는 거죠. 이 선택자를 어떻게 가져오는지에 따라 사용 방법이 달라요. 선택자를 사용하는 방법은 크게 4가지입니다. HTML 태그/요소 그룹(group) 아이디(id) 클래스(class) style="display:inline-block;width:740px;height:200px" data-ad-client="ca-pub-9512983930357661" data-ad-slot="5785466884"> 2... 2020. 1. 22.
[CSS] CSS 기본 문법, 사용방법 안녕하세요 냥장판 입니다 앞에서 CSS 개념에 대해 배웠었죠 이번 게시글에서는 CSS 문법에 대해서 살펴볼거에요. 1. CSS 기본 구조 CSS는 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자는 CSS를 적용하고자 하는 HTML Tag/elements가 오고요 선언부는 중괄호({ })안에 위치하고, 선언들은 세미콜론(;)으로 구분합니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. style=".. 2020. 1. 21.
[CSS] CSS를 사용하는 이유 안녕하세요 냥장판 입니다 이번 게시글은 CSS에 대한 아주 기초적인 지식에 대해 다룰거에요. HTML을 다루다보면, CSS stylesheet 라는 말을 들어본적이 있을겁니다. CSS는 왜 사용하며, 어떻게 사용하는지 살펴볼게요. 1. CSS란 CSS는 Cascading Style Sheets의 약자로 종속형 스타일 시트, 캐스케이딩 스타일 시트 라고 불립니다. 마크업 언어(XML, HTML 등)의 레이아웃과 스타일을 나타내는 언어에요. 우리의 맨얼굴과 맨몸뚱아리를 HTML이라고 한다면 화장하고, 옷입고, 악세사리하는 모든 꾸며주는 것들을 CSS라고 생각하면되요. 안꾸미고 나가도 되죠. HTML문만 있어도 된다는 말입니다. 꾸미고 나가나요? 그럼 CSS를 입고 나간다는 말이에요. W3C(World Wid.. 2020. 1. 20.
[HTML] display 요소(p, div, span)의 차이점 목표: p, div, span 등의 차이점 요약 Display 요소의 특징(block과 inline 개념 파악하기) 안녕하세요 냥장판 입니다 HTML 배우는 초기에 단락(paragraph)은 p, 레이아웃 분할(division)은 div, 특정 부분(span)만 묶어주는 span 에 대해서 들어본적이 있을거에요. 들어본적이 없더라도 보셨을거라 생각합니다 이들의 차이점에 대해서 설명해 드릴게요 그 전에 display 속성값의 특징에 대해 잠깐 알고가야해요 1. Display 요소값의 특징(Block, Inline) Display 요소는 두개의 특징을 가져요 Block Inline 차이점은 아래서 보실테지만, 새로운 요소값을 사용할 때 시작줄이 새로운 줄이냐 아니냐로도 나뉩니다. 2. Block-level .. 2020. 1. 17.
[HTML] charset 의 중요성 ❤ 목표: charset은 왜 쓰는거죠?요약인코딩(Encoding)과 관련있음 안녕하세요 냥장판 입니다 HTML문을 살펴보면 상단에 아래와 같은 구문이 작성된 걸 아주 얼핏 보셨을거에요 그냥 무심코 지나쳤던 charset 의 소중함을 알려드릴게요! 1. 인코딩(Encoding)과 관련있음 인코딩은 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환 해주는거에요. 자세한 설명은 아래를 참고하시고요.2019/11/28 - [놀고있네/i18n] - [Characters] 글자가 깨져요[Characters] 글자가 깨져요목표: 글자가 깨지는 이유를 알아보자 요약 문제는 인코딩(encoding) 표준화된 인코딩 방법: Unicode 웹서핑 또는 문서를 열었을 때, 외계 문자를 본적 있을 것이다. 갑자기 컴터가 암에 걸.. 2020. 1. 16.
[HTML] Link 태그 사용하기 - 새창에서 페이지 열기 안녕하세요 냥장판 입니다 여기를 눌러보세요 링크를 누르면 새창에서 페이지가 열리죠? 링크를 걸 때 새창에서 열기를 설정해서 그래요. 그럼 이거는 어떤가요? 두 개가 페이지를 여는 방식이 다르죠! 이번 게시글에서는 Link 태그를 사용해서 페이지 여는 속성을 확인해봅시당! target 속성 target 속성은 링크를 어디에서 여는지에 대해 설정할 수 있어요. 속성 내용 _blank 새 창이나 새 탭에서 페이지 열기 _self 현재 프레임(frame)에서 페이지 열기(기본설정) _parent 부모 프레임(frame)에서 페이지 열기 _top 현재 창에서 full window로 페이지 열기 target 속성 사용방법 target 속성은 아래와 같이 작성합니다. 링크 걸어주고, target에 속성값 넣으면되요!.. 2020. 1. 15.
반응형

티스토리툴바