일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- scss
- Grid
- 가상클래스
- 친해지기
- row-gap
- tailwindcss
- sass
- CLASS
- Coda
- CSS
- Pseudo
- column-gap
- 코딩테스트
- 코딩일기
- 코드일기
- property
- js
- 코드다이어리
- 정규식표현
- 코딩문제
- DOM
- frontend
- vscode
- display
- 선택자
- 코딩퀴즈
- regexp
- JavaScript
- HTML
- Today
- Total
목록2024/06 (47)
< Code diaries />
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bkB2po/btsHR0xwmZ2/HXKJn6aEldwoZPc0Pp4Nn0/img.jpg)
CSS(Cascading Style Sheet) CSS는 HTML 웹문서를 스타일링 하기위해 만들어진 언어입니다.Cascading은 '계단식'이라는 뜻인데, style의 선언문이 계속 겹쳐져 우선순위를 따르고 있는 모습을 표현 한 것 같습니다.CSS를 HTML문서에 적용시키는 방법은 총 3가지 입니다.Inline(인라인) 선언 방식 : 태그에 직접적으로 style이라는 속성(Attribute)을 이용하여 넣는 방법입니다. Javascript로 css를 제어할때에 인라인방식으로 적용됩니다. Internal(내부) 선언 방식 : ...- HTML의 ...- css폴더 아래에 style.css 파일로 만들어 HTML문서에 링크하는 방식입니다.- 이 방법이 프로젝트를 할때에 가장 많이 쓰이는 방식이며,..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/kLqwA/btsHSxg2ptO/6f5jPG73NjW5yOYcZpS6A0/img.gif)
Javascript에서 CSS 변수 다루는 방법을 한번 알아봅시다~ 먼저, CSS 변수선언은 아래와 같이 보통 :root에 선언합니다.하위 선택자들이 모두 사용할 수 있도록 하기위함입니다. 1. CSS 내에 변수 선언하기, CSS에서 사용하기// 변수선언:root { --primary : tomato; } // 변수의 값을 사용할때에는 var() css메소드 사용 .wrap { color:var(--primary) } 2. Javascript에서 CSS의 변수값을 가져오기const docs = document.documentElement; const value = getComputedStyle(docs).getPropertyValue('--primary') console.log(value..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lA6PA/btsHRvJBZIi/amhOuEL2vnWKhdThwsBsRK/img.gif)
HTML(Hyper Text Markup Language) 기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. 01. Media 및 기타 태그TagDescriptionMeaning동영상 파일을 넣을 수 있는 태그이다. 오디오 파일을 넣을 수 있는 태그이다. 다른 웹문서를 현재문서에 창을 만들어 보여줄 수 있는 태그이다.종료태그가 있지만 컨텐츠를 포함할 수없으니 주의하자. 같이 사용된다. 태그 내에서 클릭가능한 요약 제목이다.1. Tag- 2. Tag- 3. Tag- 4. , Tag- 아래의 예제를 따라해 보세요See the Pen Html - by Jey Lee (@Jey-Lee-the-sasster) on CodePen. 본 문서는 제가 오랫동안 일해왔던 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qsrMI/btsHP0EbCb0/sKvYd3RVWen5F7XJV65HOk/img.gif)
HTML(Hyper Text Markup Language) 태그내에 사용할 수 있는 HTML TAG를 알아보아요~ TAG LISTTagDescriptionMeaning폼 그룹 태그이다. 필드들을 그룹을 묶어 줄 수 있다. 태그의 첫번째 child element로 꼭 존재해야하며, 필드그룹의 제목을 표시한다. 폼필드의 레이블 태그이다. 연결해주는 방법은 명시적인방법과 암묵적인 방법 두가지가 있다. 폼필드 명령어이며, type에 따라 다양한 형태로 존재한다. 버튼을 만드는 태그이며 종류는 3가지 이다. 드롭다운 메뉴그룹 태그이다. 태그와 셋트로 사용된다. 메뉴내에 이 많을경우 그룹으로 여러개 묶을 때 사용한다. 태그의 선택할 수 있는 메뉴리스트 이다. 여러줄을 입력할 수 있는 텍스트필드이다. 컨텐츠..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/JuXKK/btsHPwXPp3I/V7IN8MYcqgGDxKrO1VRYyk/img.gif)
HTML(Hyper Text Markup Language) 기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. 01. 표를 만드는 태그TagDescriptionMeaning표를 만들때에 제일먼저 적어주는 그룹태그이다. 행 그룹 중 제목행에 속한다. 하나의 태그내에 한개만 존재할 수 있다. 행 그룹 중 내용을 묶을때 사용하며, 하나의 태그내에 여러개가 존재할 수 있다. 행 그룹 중 결과행에 속한다. 하나의 태그내에 한개만 존재할 수 있다.웹접근성에 따라 바로밑에 을 적어서, 이 표의 최종 결과를 먼저인식할 수있도록 마크업의 위치를 바꾸는 걸 목표로 한다.현재에는 이런 본질적인 의미보다 표의 꼬릿말처럼 사용되는 것같다.하지만, 본래의 목적과 사용방법은 바로밑에 셋트처럼 존재해야한다는 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bd9jpu/btsHRvCP5h4/aXK7HP44lwHNRBx1bsk2h1/img.gif)
HTML(Hyper Text Markup Language) 기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. 03. 목록을 만드는 태그 - 목록 태그는 글 목록에도 사용하지만, 주로 메뉴구조에도 사용됩니다.TagDescriptionMeaning목록그룹태그, 순번이 없는 목록에 사용Child element는 만 허용됨(중요)Bullet 기호로 목록을 표시하며 종류는 3가지 또는 이미지로도 가능하나 잘 사용하지 않습니다. Unordered List목록 그룹태그, 순번이 있는 목록에 사용Child element는 만 허용됨(중요)순번을 나타낼수 있는 숫자, 로마자, 알파벳 대소문자등으로 변경이 가능합니다.Ordered List, 태그의 child element로 사용되며, 다른태그의 c..