'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/

1
2

Copyright © 새로비 All Rights Reserved

Designed by JB FACTORY

티스토리툴바