'Language & Solution/HTML&CSS' 카테고리의 글 목록

Language & Solution/HTML&CSS (20)

[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit)

Language & Solution/HTML&CSS 새로비 2019. 10. 22. 18:23

column 속성으로 다단으로 편집 텍스트 단을 column 속성으로 다단으로 편집할 수 있습니다. 다단으로 편집한다는 의미는 어떤 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. 보통 다단으로 편집하려면 table 요소를 사용하여 구성하기도 하지만 css의 column 속성으로 간편하게 구현할 수 있습니다. column-width column-width를 통해 column으로 표현되는 단의 너비를 고정해 놓고 구성할 수 있습니다. column 즉, 단을 고정시켜 놓았을 경우 화면이 커지면 단의 개수가 많아질 것이고 화면이 작아지면 단의 개수가 줄어드는 원리입니다. column-width: | auto 단 너비를 직접 지정할 수 있습니다. auto 단의 개수 같은 다른 속성에 따라 단 ..

[HTML&CSS] position 속성 정리하기!

Language & Solution/HTML&CSS 새로비 2019. 10. 10. 14:18

*아래를 누르시면 HTML, CSS 코드 실행환경을 만드실 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 position 속성 position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있죠. 티스토리를 하다보면 css를 수정해야하는 일이 잦습니다. 만약 position 속성에 대한 이해없이 css를 수정한다면 예상치도 못하게 블로그 레이아웃이 이상해지거나 망가질 수 있습니다( Wordpress나 서비스 UI, 프론트엔드쪽 만질 때도 마찬가지!). 딴 건 몰라도 화면단과 관련된..

[HTML&CSS] box-sizing, float, clear

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 17:55

| box-sizing box-sizing 속성은 width의 크기를 어떤 기준으로 할 것인지를 정하는 속성입니다. 박스 모델에서 width의 값을 토대로 콘텐츠 영역의 크기를 결정하는 것이죠. 처음 감을 잘 못잡을 수도 있지만 천천히 포스팅을 따라오다보면 쉽게 이해할 것입니다! box-sizing에서 사용할 수있는 값은 다음과 같습니다. box-sizing : content-box | border-box content-box width 속성값을 콘텐츠 영역 너비 값으로 사용합니다. (기본값) border-box width 속성값을 콘텐츠 영역 및 테두리(border)까지 포함한 박스 모델 전체 너비 값으로 사용합니다. 참고로 content-box보다는 border-box가 width를 통해 콘텐츠 영역..

[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 16:50

*아래 링크를 누르시면 HTML, CSS 코드 실행환경을 만들 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 마진(margin) 마진(margin)은 요소 주변 여백을 뜻합니다. 마진의 크기를 조절함으로서 다른 요소 사이에 간격을 남겨 유저 친화적인 UI를 구사할 수 있죠. 마진 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 이름에서 알 수 있듯 위, 오른쪽, 아래쪽, 왼쪽 여백들을 가리키는 속성들이며 이를 한 번에 표기할 수 있는 margin이란 속성도 있습니다. 사용법은 다음과 같습니다. margin : | | auto margin-top ..

[HTML&CSS] 콘텐츠(content) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 21:38

| 콘텐츠 영역 콘텐츠 영역(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로 텍스트, 이미지, 비디오 등 실제 내용을 포함하는 부분입니다. 콘텐츠 영역의 크기는 콘텐츠 너비 및 콘텐츠 높이로 결정되며 width와 height 속성으로 설정할 수 있습니다. width: | | autoheight: | | auto : px이나 cm 같은 단위로 지정합니다. : 박스모델을 포함하는 부모 요소 기준으로 너비나 높이값을 백분율로 지정합니다. (부모가 없을 때는 viewport 기준)auto : 박스모델의 크기가 콘텐츠 양에 따라 자동으로 결정됩니다. (기본값) 참고로 CSS 박스 모델의 width 속성은 콘텐츠 영역의 너비를 말합니다. 이때 콘텐츠 영역를 계산하는 방식은 어떤 bo..

[HTML&CSS] 테두리(border) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 15:13

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 테두리(border) 영역 박스 모델(box model)에서 테두리는 텍스트 단락 뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. | border-style : 테두리 스타일 border-style은 테두리의 스타일을 정하는 속성으로 쓰이며 다음과 같은 값을 지정할 수 있습니다. none 테두리가 나타나지 않습니다. (기본값) hidden 테두리가 나..

[HTML&CSS] 박스모델 (Box Model)

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 10:51

| 박스모델 (box model) CSS에서는 각 요소를 박스 형태로 나타내며 이를 박스모델(Box Model)이라 합니다. 문서의 레이아웃을 계산할 때, 브라우저는 CSS 기본 박스 모델에 따라 각 요소를 사각형 박스로 표현합니다. 하나의 박스는 아래와 같이 네 부분으로 이루어집니다. 마진(Margin) : 바깥 여백을 나타냅니다.테두리(Border): 마진과 패딩 사이의 테두리 영역을 나타냅니다.패딩(Padding): 안쪽 여백 영역을 나타냅니다.콘텐츠(Content): 실제 텍스트나, 이미지가 들어가는 영역입니다. | 박스모델(box model) 확인하는 방법 박스모델은 각 브라우저에서 개발자도구창에서 쉽게 확인할 수 있습니다. 크롬을 기준으로 F12를 누르면 개발자 도구창이 나오며 Elements..

[HTML&CSS] CSS 스타일 우선순위

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 18:22

| CSS 스타일 우선순위 (CSS Style Precedence) CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 이러한 방식으로 CSS는 중복되는 스타일 규칙을 '위에서 아래로' 적용되며 방지하는 방법을 채택하고 있습니다. 즉 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을 지 결정하는 것이죠. 스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음) 1. 사용자 스타일 시트, 중요 2. 제작자 스타일 시트, 중요 3. 제작자 스타일 시트, 일반 4. 사용자 스타일 시트 일반 5. 브라우저 스타일 시트 여기서 사용..

[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 16:24

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진..

[HTML&CSS] 목록 작성하기 // <ul>, <ol>,<li>, <a href="#">, <dl>, <dt>, <dd>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:58

| , Unordered List를 뜻함. 순서가 없는 리스트를 작성할 때 쓰는 태그 Lorem ipsum ! Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur. | , Ordered List를 뜻함. 순서가 있는 리스트를 작성할 때 쓰는 태그 Lorem, ipsum. Lorem, ipsum. | 해당 텍스트를 클릭할 시 페이지 맨 위로 올라가게 끔 하는 태그 | , , 사전과 같은 용어에 대한 정의에 대한 리스트를 작성할 때 쓰는 태그들 : 정의에 대한 리스트를 나타내는 태그 (Definition List): 밑에 쓰이며 제목을 나타내는 데 쓰임 (Definition Title): 용어의 설명이 위치하는 태그 (Definition D..

[HTML&CSS] 제목, 문단, 연락처, 인용문 // <h1>~<h6>, <address>, <blockquote>, <hr>, <footer>, <pre>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:32

| ~ 제목을 나타내는 태그. 숫자가 커질수록 글자 크기가 줄어든다. heading 1 heading 2 heading 3 heading 4 | 새로운 내용이 나타내는 것을 나타내는 태그. 브라우져 상에는 한 줄이 그어진다. | 주소를 나타내는 태그 천안시 서북구 불당동 1167 202호 | 인용문을 나타내는 태그 So many times to go | 바닥글을 나타내는 태그 출처 :웹 접근성 연구소 | Preformatted Text의 약자. HTML 입력한 형태 그대로 보여주는 태그 So many times to rest | HTML 코드 DOCTYPE html> h1~h6, p, address, blockquote, hr, pre heading 1 heading 2 heading 3 heading ..

[HTML&CSS] 루비 주석과 시간 표현 // <ruby>, <rt>, <time>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 22:18

| , 텍스트에서 이 텍스트가 어떤 식으로 발음되는 지 혹은 어떤 의미인지 나타날 때 쓰는 태그다. 태그는 와 같이 쓰인다. 태그 안에 를 지정하여 해당 텍스트의 부가적인 정보를 텍스트 위에 나타내게 된다. 家和萬事成 (가화만사성) | 시간을 나타낼 때 쓰는 태그 : 현재 텍스트가 어떤 시간을 나타내는 지 속성으로 나타낼 수 있다. | HTML 코드 DOCTYPE html> Document 家和萬事成 (가화만사성) 家가 和화 萬만 事사 成성 오늘친구 생일이라서 일찍 들어가 봐야 합니다. 논문 발표일은 2017월 9월11일입니다. | 결과 家和萬事成(가화만사성)家가和화萬만事사成성오늘친구 생일이라서 일찍 들어가 봐야 합니다.논문 발표일은 2017월 9월11일입니다.

[HTML&CSS] 단어의 정의, 약어, 작품의 제목 표현 // <dfn>, <abbr>, <cite>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 21:50

| 마우스를 해당 텍스트에 올려 놓았을 때(hovering) 표시되는 텍스트를 표시. : hovering 했을 때 [DESCRIPTION] 문자열이 뜸 HTML | 축약된 텍스트라는 것을 나타낼 때 쓰는 태그 : hovering 했을 때 [DESCRIPTION] 문자열이 뜸 W3C | 영화 제목, 음악 제목 등 작품의 제목을 표현할 때 쓰는 태그 시차 (We Are) | HTML 코드 DOCTYPE html> dfn, abbr, cite HTML 월드 와이드 웹 컨소시엄W3C 시차 (we are) (feat. 로꼬 & GRAY) 우원재 시차 (We Are) 우원재 값 : 50,000 (부가세별도) | 결과 HTML 월드 와이드 웹 컨소시엄W3C 시차 (we are) (feat. 로꼬 & GRAY) 우원재..

[HTML&CSS] 구문 강조, 하이라이팅(Highlight) 지정 <string>, <em>, <mark>

Language & Solution/HTML&CSS 새로비 2018. 12. 10. 21:08

| 태그HTML에서 무언가를 강조할 때 쓰는 태그 기본적으로 볼드체로 보여진다. | 태그 태그와 쓰이는 용도가 비슷. 기본적으로 기울여진 채로 표시된다. 가장 이쁜 꽃은 장미다. | 태그HTML의 어떤 부분을 마킹할 때 쓰이는 태그 기본적으로 노란색으로 글씨가 마킹된 채로 표시된다. It is very important thing that | 전체 HTML 코드 DOCTYPE html> string, em, mark string, em, mark 우리집 화단에서 가장 이쁜 꽃은 장미다. 저기 있는 웅덩이는 깊어서 위험하므로 들어가지 마시오. It is very important thing that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Se..

[HTML&CSS] HTML 템플릿 작성하기, <div> 의 쓰임새 및 <a href="#content">

Language & Solution/HTML&CSS 새로비 2018. 11. 27. 22:19

: HTML에서 어떤 구역을 지정할 때 쓰는 태그 : div에 아이디를 지정 : 웹 접근성 측면에서 tab을 눌렀을 때 본문 바로가기가 나올 수 있게 하는 태그 | HTML 템플릿 HTML 템플릿은 보통 div태그를 통해서 지정하게 된다. 아래는 div에 id를 부여해서 각 구역을 나누는 HTML템플릿의 한 예다. header, container, footer로 구성하고 이 전체 div요소를 wrap으로 감싼다. container 안에는 또한 content를 포함한 여러 요소로 나눌 수 있다. 본문바로가기 출처 : https://www.inflearn.com/course-status-2/

[HTML&CSS] html meta요소 알아보기

Language & Solution/HTML&CSS 새로비 2018. 11. 25. 23:00

: 이 웹페이지에서 대표되는 키워드를 나열하는 메타태그. 구글 검색엔진에서는 keyword는 검색요소로 포함을 안한다고 함. : 웹페이지의 설명을 적어놓는 메타태그. 구글 검색엔진에서 이 메타태그 요소를 고려한다고 함. 꼭 쓰면 좋은 메타태그▶https://support.google.com/webmasters/answer/35624?hl=ko : 웹페이지의 저작자를 적음 : 웹페이지를 만들 때 사용했던 프레임워크(bootstrap, wordpress) : 검색 로봇이 웹사이트 정보를 수집할 때 참고하는 정보. content에는 index와 follow, all, nofollow, noindex, none 값이 포함될 수 있다.index : 웹사이트의 내용을 검색허용하여 로봇이 이 페이지를 인덱싱할 수 있..

[HTML&CSS] 문서형 선언, 언어 지정, 문자 코드 셋 지정하기

Language & Solution/HTML&CSS 새로비 2018. 11. 25. 22:26

: 문서형 선언 구문. html5의 문서형을 쓰겠다는 의미. html4, xhtml마다 이 문서형 선언 구문이 다르고 언어지정, 문자 코드셋 지정문구도 다 다르다. 그 부분은 다음 사이트를 참조.▶https://www.w3schools.com/tags/tag_doctype.asp : html 문서의 언어지정을 하는 속성. 한국어는 "ko"로 변경. 다른 언어로 다시 표현을 할 때는 lang속성을 다시 변경 : 문자 코드셋을 지정하는 부분. 여기서는 UTF-8로 지정함. 주의할 점은 태그보다 먼저 지정해야한다. 자칫하면 특정 브라우져 상(특히 internet explorer)에서 title이 깨져서 보일 가능성이 있음.

[HTML&CSS] DOCTYPE, p 태그<p>, input 태그 <input>, table 태그 요소 <table>, <tr>, <td>

Language & Solution/HTML&CSS 새로비 2018. 11. 25. 22:13

: html5 문서 선언 방식 Lorem ipsum dolor sit amet. : paragraph의 약자 한 문단을 나타냄 : style 속성으로 p태그 안의 붉은색 글자를 표시Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. : 텍스트형식으로 값을 받는 태그 : 테이블 요소를 표현하는 태그 : 테이블의 행을 표현 : 테이블의 각 데이터를 표현, 즉 열로서 표현된다. cell

[HTML&CSS] HTML 태그 정리

Language & Solution/HTML&CSS 새로비 2018. 11. 1. 03:35

: 언어 지정 tag : 문자 인코딩 set : Html 문서형식을 정의 : facebook , kakao, line 등 sns에서 정보공유를 할 때, 링크된 url의 정보를 표시해주는 메타태그 : 모바일 기기 환경에서 디바이스의 크기에 맞게 해상도를 조정하는 기능을 하는 메타태그 : inline tag 한 줄에 다 쓰여짐 : 어떤 블록의 의미를 설명하는 태그. hover했을 때 의미가 나옴 : 어떤 축약된 단어가 무엇을 의미하는 지 알고 싶을 때 쓰는 태그 : 작품의 제목을 표현하는 태그 : 어떤 글자를 다른 글자 위에 놓고 싶을 때 : 시간을 나타낼 때 : 이전과 다음 내용이 다를 때 그어주는 경계 : 단락, 하나의 덩어리들은 모두 p 태그로 표현 가능 : 주소표현 태그 : 인용할 때 쓰는 태그. s..

[HTML&CSS] CSS의 특징과 규칙

Language & Solution/HTML&CSS 새로비 2017. 5. 20. 14:17

CSS는 검색 및 그를 통한 무언가를 대체할 수 있는 도구라고 생각해도 됩니다. 왜냐하면 CSS는 HTML문서의 요소를 식별함으로써 그 요소에 개발자가 원하는 스타일과 포맷을 설정할 수 있기 때문이죠. CSS는 다음과 같은 특징이 있습니다. 기능 확장성 HTML 대부분의 요소들에 다양한 기능을 추가할 수 있어 웹개발자는 CSS를 통해 독특한 문서형식을 설계할 수 있습니다.다양한 폰트 사이즈와 줄간격도 지원하죠. 양식의 모듈화스타일 시트를 HTML에 부가적으로 활용할 수 있습니다. 일정 양식을 CSS로 작성한 후 HTML에 적용하면 전체 문서가 같은 양식으로 통일감 있게 구성될 수 있습니다. 또한, 스타일에 변경 사항이 생겨도 CSS 파일만 수정하면 되므로 유지보수에도 편합니다. 그리고 CSS는 다음과 같..

1

Sidebar

Copyright © 새로비 All Rights Reserved

Designed by JB FACTORY

티스토리툴바