본문 바로가기

전체 글168

CSS 2D Transforms Transforms CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다. 2D 회전 브라우저 지원 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 브라우저 별 접두사 일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다. div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ } CSS 2D 변환 방법 CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다. translate() rotate() scaleX() scaleY() scale() skewX() s.. 2020. 2. 26.
VS code sass compile https://bbol-world.tistory.com/80 VSCODE sass compile 하기 2018/05/24 - [Programing] - VSCODE 에디터 설치 및 세팅 compile 하기 위한 방법은 여러가지가 있지만, VSCODE를 이용하여 간편하게 compile 하는 방법이 있으니 그 방법을 추천한다. 시작하기에 앞서 sass를 더.. bbol-world.tistory.com 2020. 2. 26.
CSS Layout - Overflow CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다. #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d.. 2020. 2. 25.
CSS Box Model div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 모든 HTML 요소는 상자로 간주 될 수 있습니다. CSS에서 "상자 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 둘러싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 박스 모델을 보여줍니다. 요소의 너비와 높이 모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다. 중요 사항 : CSS를 사용하여 요소의 너비 및 높이 특성을 설정하는 경우 컨텐츠 영역 의 너비 및 높이 만 설정하면 됩니다. 요소의 전체 크기를 계산.. 2020. 2. 25.
CSS Padding CSS Padding padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다. padding-top padding-right padding-bottom padding-left div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 25px 50px 75px 100px; } 패딩 및 요소 너비 CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ). 따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다. div { wi.. 2020. 2. 25.
CSS Margins CSS Margins margin속성은 정의 된 경계 외부에서 요소 주위에 공간을 만드는 데 사용됩니다. CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각 측면에 대한 여백을 설정하는 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽). p { margin: 70px } 이 요소의 여백은 70px입니다. CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다. margin-top margin-right margin-bottom margin-left p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } 모든 여백 속성은 다음 값을 가질 수 있습니다. auto-브라우저가 마진을 계.. 2020. 2. 25.
CSS width/height CSS 높이와 너비 설정 height및 width특성 요소의 높이와 폭을 설정하는 데 사용된다. 높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 패딩, 테두리 및 요소의 여백 내부 영역의 높이 / 너비를 설정합니다. CSS 높이 / 폭 값 height및 width속성은 다음과 같은 값을 가질 수 있습니다 : auto-이것이 기본값입니다. 브라우저는 높이와 너비를 계산합니다 length -높이, 너비를 px, cm 등으로 정의합니다. % -포함 블록의 높이 / 폭을 퍼센트로 정의 initial -높이 / 너비를 기본값으로 설정 inherit -높이 / 너비는 부모 값에서 상속됩니다 div { height: 200px; width: 50%; background-color: powderb.. 2020. 2. 24.
CSS Rounded Borders border-radius속성은 요소에 둥근 테두리를 추가하는 데 사용 .border_radius1 .radius { display: inline-block; width: 100px;height: 100px; background: gray; } .border_radius1 .radius1 { border-radius: 10px; } .border_radius1 .radius2 { border-radius: 50%; } .border_radius1 .radius3 { border-radius: 100px 100px 0 0; } .border_radius1 .radius4 { border-radius: 40px 15px 40px 15px; } 2020. 2. 24.
CSS Border wCSS Border Style border-style속성은 표시 할 테두리 종류를 지정합니다. p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dot.. 2020. 2. 24.
티스토리 단축키 기본 단축기 관리자(admin) Q 이전 글 A 다음 글 S 최근에 올라온 글 Z 최근에 달린 댓글 X 최근에 받은 트랙백 C 티스토리 글쓰기 기본 모드에는 여러 단축키가 있습니다. 마우스로 모든 기능을 사용할 수 있지만 간단한 문서 편집에서 단축키가 있다면 훨씬 쉬운 문서 작성이 가능할 것입니다. 어떤 단축키가 있는지 하나씩 살펴보겠습니다. 문단 스타일 스타일 PC Mac 제목1 (h2) Alt+Shift+2 Ctrl+Alt+2 제목2 (h3) Alt+Shift+3 Ctrl+Alt+3 제목3 (h4) Alt+Shift+4 Ctrl+Alt+4 문단3 (p) Alt+Shift+7 Alt+Shift+7 티스토리 에디터에서 제공하는 문단 스타일은 제목1이 HTML의 h2에 해당합니다. 글 제목이 h1에 해당하.. 2020. 2. 21.
CSS Backgrounds CSS background-color background-color속성은 요소의 배경색을 지정합니다. /* a valid color name - like "red" */ body { background-color: lightblue; } /* a HEX value - like "#ff0000" */ #p1 {background-color: rgb(255, 0, 0);} /* red */ #p2 {background-color: rgb(0, 255, 0);} /* green */ #p3 {background-color: rgb(0, 0, 255);} /* blue */ /* an RGB value - like "rgb(255,0,0)" */ #p1 {background-color: rgba(255, 0, .. 2020. 2. 21.
CSS Text 실무 샘플 text-overflow를 이용한 말줄임 text-overflow속성은 표시되지 않은 오버플로 된 콘텐츠를 사용자에게 알리는 방법을 지정합니다. 잘 리거나 줄임표 (...)를 표시하거나 사용자 지정 문자열을 표시 할 수 있습니다. .text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 24px; color: #222; } text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-trans.. 2020. 2. 21.
CSS Web font CSS @ font-face 규칙 웹 글꼴을 사용하면 웹 디자이너는 사용자 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다. 사용하려는 글꼴을 찾거나 구입 한 경우 웹 서버에 글꼴 파일을 포함 시키면 필요할 때 자동으로 사용자에게 다운로드됩니다. /fonts 폴더에 폰트를 저장 후 css에서 폰트를 연결합니다. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } 자주 사용하는 웹폰트 CDN 글꼴을 웹 페이지에 포함 시키려면 아래 코드를 HTML 문서의 태그 안에 붙여넣시오 . 아래는 자주 사용하는 글꼴 모음입니다. link 방식 import 방식 /* Noto Sa.. 2020. 2. 20.
CSS Fonts CSS 글꼴 속성은 Serif와 Sans-serif 글꼴의 차이점 글꼴 모음, 굵게, 크기 및 텍스트 스타일을 정의합니다. Font Family 텍스트의 글꼴 군은 font-family속성으로 설정됩니다 . 이 font-family속성에는 "대체"시스템으로 여러 글꼴 이름이 있어야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴 등을 시도합니다. 다른 글꼴을 사용할 수없는 경우 브라우저가 일반 패밀리에서 유사한 글꼴을 선택할 수 있도록 원하는 글꼴로 시작하고 일반 패밀리로 끝납니다. 참고 : 글꼴 모음 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다. 쉼표로 구분 된 목록에 둘 이상의 글꼴 패밀리가 지정되었습니다. p { font-family: "Ti.. 2020. 2. 18.
가상 선택자 가상 클래스 선택자 /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }​ a:link 링크가 걸린 문자에 속성을 부여하는 선택자 a:visited 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 a:hover 링크기 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 a:active 링크가 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다.. 2020. 2. 17.
CSS 속성(Attribute) 선택자 h1[class] class명을 가진 h1 요소 img[alt] alt 속성을 가진 img 요소 p[class="abc"] class명이 유일하게 'abc'인 p 요소 p[class~="abc"] class명이 유일하게 'abc이거나 여러 개의 class명 중 하나가 'abc'인 p요소 p[class|="abc"] class명이 'abc'이거나 'abc-'로 시작하는 요소 p[class^="abc"] class명이 철자 'abc'로 시작하는 p 요소 p[class$="abc"] class명이 철자 'abc'로 끝나는 p 요소 p[class*="abc"] class명이 철자 'abc'가 포함되어 있는 p 요소 p[href="mailto"] href 속성값이 'mailto'로 시작하는 a 요소 CSS [at.. 2020. 2. 14.
CSS Type 선택자 CSS 선택하기 요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다. CSS 엘리먼트 선택 요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다. p { text-align: center; color: red; } CSS id 선택기 id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다. 요소의 id는 페이지 내에서 고유하므로 id 선택기는 하나의 고유 한 요소를 선택하는 데 사용됩니다! 특정 ID를 가진 요소를 선택하려면 해시 (#) 문자와 요소의 ID를 차례로 쓰십시오. #para1 { text-align: center; color: red; } 아이디 이름은 숫자로 시작할 수 없습니다! CSS 클래스 선택기 클래스 선택기는 특정 클래스 속성을 가진 HTML .. 2020. 2. 14.
CSS 사용법 CSS 란 무엇입니까? CSS는 의미 C ascading의 S의 tyle가 S heets을 CSS는 HTML 요소가 화면, 종이 또는 다른 매체에 표시되는 방법을 설명 합니다 CSS 는 많은 작업을 저장합니다 . 여러 웹 페이지의 레이아웃을 한 번에 제어 할 수 있습니다 외부 스타일 시트는 CSS 파일에 저장됩니다 CSS 구문 CSS 규칙 세트는 선택기와 선언 블록으로 구성됩니다. 선택기는 스타일을 지정할 HTML 요소를 가리 킵니다. 선언 블록에는 세미콜론으로 구분 된 하나 이상의 선언이 포함됩니다. 각 선언에는 CSS 속성 이름과 값이 콜론으로 구분되어 포함됩니다. CSS 선언은 항상 세미콜론으로 끝나고 선언 블록은 중괄호로 묶습니다. p { color: red; text-align: center; .. 2020. 2. 14.
HTML5 Canvas HTML 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. 왼쪽의 그래픽은으로 만들어집니다 . 빨간색 사각형, 그라디언트 사각형, 다색 사각형 및 다색 텍스트의 네 가지 요소가 표시됩니다. HTML Canvas 란 무엇입니까? HTML 요소는 JavaScript를 통해 즉석에서 그래픽을 그리는 데 사용됩니다. 요소는 그래픽 만 컨테이너입니다. 실제로 그래픽을 그리려면 JavaScript를 사용해야합니다. Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 몇 가지 방법이 있습니다. 캔버스 예 캔버스는 HTML 페이지에서 직사각형 영역입니다. 기본적으로 캔버스에는 테두리와 내용이 없습니다. 마크 업은 다음과 같습니다. 항상 id스크립트에서 참조 할 속성 width과 height캔버스의 .. 2020. 2. 13.
HTML5 Video (fullpage Video) 풀페이지 동영상 http://eehd80.dothome.co.kr/work/forest/v4/ 광릉숲 생물권보전지역 UNESCO Gwangneung Forest Biosphere Reserve 생물권보전지역 자연생태자원 문화역사자원 인적자원 국립수목원 제공 eehd80.dothome.co.kr HTML로 비디오 재생 HTML5 이전에는 플러그인 (예 : 플래시)이있는 브라우저에서만 비디오를 재생할 수있었습니다. HTML5 요소는 웹 페이지에 비디오를 포함시키는 표준 방법을 지정합니다. Your browser does not support the video tag. Your browser does not support HTML5 video. 이 controls속성은 재생, 일시 중지 및 볼륨과 같은 비디오.. 2020. 2. 13.
HTML5 audio 웹 오디오 HTML5 이전에는 오디오 파일을 플러그인 (예 : 플래시)이있는 브라우저에서만 재생할 수있었습니다. HTML5 요소는 웹 페이지에 오디오를 포함시키는 표준 방법을 지정합니다. HTML 요소 Your browser does not support the audio element. Your browser does not support the audio element. 이 controls속성은 재생, 일시 중지 및 볼륨과 같은 오디오 컨트롤을 추가합니다. 이 요소를 사용하면 브라우저에서 선택할 수있는 대체 오디오 파일을 지정할 수 있습니다. 브라우저는 처음 인식 된 형식을 사용합니다. 및 태그 사이의 텍스트 는 요소를 지원하지 않는 브라우저에만 표시됩니다 . HTML 오디오 및 비디오 DOM 참조 .. 2020. 2. 13.
HTML5의 새로운 태그 HTML5의 새로운 기능 HTML5에 대한 DOCTYPE 선언은 매우 간단합니다. Content of the document...... HTML5의 기본 문자 인코딩은 UTF-8입니다. 의미 요소를 블록 요소로 정의 HTML5는 8 개의 새로운 의미 요소를 정의합니다 . 이들은 모두 블록 레벨 요소입니다. 이전 브라우저에서 올바른 동작을 보장하기 위해 이러한 HTML 요소 의 CSS 표시 속성을 설정하여 차단할 수 있습니다 . header, section, footer, aside, nav, main, article, figure { display: block; } Internet Explorer 8 문제 모든 새로운 HTML5 요소에 대해 위에서 설명한 솔루션을 사용할 수 있습니다. 그러나 IE8 (및.. 2020. 2. 13.
HTML 기본 layout HTML5의 새로운 의미 요소 많은 웹 사이트에는 탐색, 머리글 및 바닥 글을 나타내는 와 같은 HTML 코드가 포함되어 있습니다 . HTML5는 웹 페이지의 다른 부분을 정의하기위한 새로운 의미 요소를 제공합니다. HTML5 요소 요소는 문서의 섹션을 정의합니다. W3C의 HTML5 문서에 따르면 : "섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다." 홈페이지는 일반적으로 소개, 컨텐츠 및 연락처 정보를 위해 섹션으로 분할 될 수 있습니다. WWF The World Wide Fund for Nature (WWF) is.... HTML5 요소 이 요소는 독립적이고 독립적 인 컨텐츠를 지정합니다. 기사는 독자적으로 이해해야하며, 웹 사이트의 나머지 부분과 독립적으로 읽을 수 있어야합니다. 요소를 사.. 2020. 2. 12.
html header 정보 DOCTYPE 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 . html 5 권장 XHTML HTML 문서 제목 각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 ( 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔진에 대한 최적화를 꾀한다. 또한 문서 제목에 컨텐츠 제목을 포함시킴으로써, 외부 검색서비스에서 해당 컨텐츠의 노출이 더 잘될 수 있도록 한다. 기본 규칙 컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명 경제 | Daum 미디어다음 IT/과학 | Daum 미디어다음 스타존 | Daum 영화 하위섹션명은 서비스명 앞에 표기한다. 하위섹션명의 구분자는 ' | ' (vertical bar / pipe 기호) 를 사용한다. 섹션명은 웹접근성 요.. 2020. 2. 12.
웹접근성 준수 된 회원가입 폼 http://flato.kr/work/2000n/s503_write.html 이천시동행누리센터 동서양의 아름다운 정원을 품은 이천시동행누리센터으로 여러분을 초대합니다. flato.kr * 표시는 필수 입력 사항입니다. 정확하게 입력해 주세요! 기본정보 이용신청서 다운로드 아이디, 비밀번호, 비밀번호 확인 정보를 포함하는 표 아이디필수입력 ※ 최소 6자 이상의 영문, 숫자로 만들 수 있습니다. 비밀번호필수입력 ※ 특수문자, 영문자, 숫자 3종류를 포함한 9~15자리 이어야 합니다. 비밀번호 확인필수입력 이용대상자 성명, 생년월일, 성별, 이메일, 전화번호, 휴대폰번호, 주소 정보를 포함하는 표 성명필수입력 성별필수입력 남성 여성 생년월일필수입력 월 1 2 3 4 5 6 7 8 9 10 11 12 이메일 전.. 2020. 2. 12.
HTML input 속성 value 속성 이 value속성은 입력 필드의 초기 값을 지정합니다. First name: First name: 읽기 전용 속성 이 readonly속성은 입력 필드가 읽기 전용 (변경 불가능)임을 지정합니다. First name: First name: 비활성화 된 속성 이 disabled속성은 입력 필드가 비활성화되도록 지정합니다. 비활성화 된 입력 필드는 사용할 수없고 클릭 할 수 없으며 양식을 제출할 때 해당 값이 전송되지 않습니다. First name: First name: 크기 속성 이 size속성은 입력 필드의 크기 (문자)를 지정합니다. First name: First name: maxlength 속성 이 maxlength속성은 입력 필드에 허용되는 최대 길이를 지정합니다. First nam.. 2020. 2. 12.
HTML Form 요소 요소 가장 중요한 양식 요소는 요소입니다. 요소는에 따라 여러 가지 방법으로 표시 할 수 있습니다. type속성을 생략하면 입력 필드에 기본 유형 인 "text"가 표시됩니다. 요소 요소는 정의 드롭 다운 목록 : Volvo Saab Fiat Audi Volvo Saab Fiat Audi 요소는 선택할 수있는 옵션을 정의합니다. 기본적으로 드롭 다운 목록의 첫 번째 항목이 선택됩니다. 미리 선택된 옵션을 정의하려면 옵션에 selected속성을 추가하십시오 . Fiat Volvo Saab Fiat Audi size표시되는 값의 수를 지정 하려면 속성을 사용하십시오. Volvo Saab Fiat Audi Volvo Saab Fiat Audi multiple사용자가 둘 이상의 값을 선택할 수있게 하려면 속성을.. 2020. 2. 12.
HTML Input Type 속성 HTML 입력 유형 HTML에서 사용할 수있는 다른 입력 유형은 다음과 같습니다. 인라인 요소 1. 사용자로부터 데이터 값을 입력받기 위한 태그입니다. 2. type 속성 값에 따라 다양한 폼 컨트롤을 생성할 수 있습니다. 3. 공통 속성으로 name, value 속성이 있습니다. text 한 줄 글 입력 상자 maxlenhth 속성으로 최대 글자 수를 제한할 수 있다. password 비밀번호 입력 상자 입력된 내용은 '*'로 표시된다. search 검색 입력 상자 email 이메일 입력 상자 tel 전화번호 입력 상자 color 컬러 입력 상자 number 숫자 입력 상자 숫자의 최솟값, 최댓값을 min, max 속성으로 지정할 수 있다. range 슬라이드 바 숫자의 최솟값, 최댓값을 min, ma.. 2020. 2. 11.
HTML 폼 요소 HTML 요소는 사용자 입력을 수집하는 데 사용되는 양식을 정의합니다. HTML 양식은 양식 요소를 포함 합니다 . 양식 요소는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소입니다. . form elements . 요소 요소는 가장 중요한 형태 요소입니다. 요소는에 따라 여러 가지 방법으로 표시 할 수있는 유형의 속성. 한 줄 텍스트 입력 필드를 정의합니다 라디오 버튼을 정의합니다 (많은 선택 중 하나를 선택하기위한 것) 제출 단추를 정의합니다 (양식 제출). 텍스트 입력 텍스트 입력을 위한 한 줄 입력 필드를 정의합니다 . First name: Last name: First name: Last name: 라디오 버튼 입력 라디오 버튼을 정의 합니다 . 라디오 .. 2020. 2. 11.
HTML 테이블 웹접근성이 준수된 테이블 2007시즌 팀순위 순위 팀 경기수 승 패 승률 승차 최근 우승 콜로라도 845 448 511 0.521 - - 1 콜로라도 163 90 73 0.552 - 9승-1패 2 샌디에이고 163 89 74 0.546 1 4승-6패 3 뉴욕M 163 88 74 0.543 1.5 4승-6패 4 애틀랜타 163 84 78 0.519 5.5 5승-5패 5 밀워키 163 83 79 0.512 6.5 5승-5패 6 LAD 163 82 80 0.506 7.5 3승-7패 널리를 참고하여 테이블을 코딩하세요. https://nuli.navercorp.com/sharing/ui/patternTable UI 라이브러리 Table 패턴 가이드 nuli.navercorp.com HTML 테이블 정의 HTML.. 2020. 2. 10.