profile
선명한 기억보다 흐릿한 메모

vh, vw, %

열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환vmax : viewport길이 중 더 긴 길이 기준vmin : 더 짧은 길이 기준% 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환또한, 그냥 전체 화면의 %를 쓴다 하

2022년 7월 22일
·
0개의 댓글
·
post-thumbnail

Westagram

웹 페이지 정보를 다른 페이지로 전송하는 역할속성 종류action : 폼 내부에 데이터를 보내는 목적지 url지정보통 input태그 type="submit"으로 설정해서 클릭했을 때 데이터 서버로 보냄.\\actocomplete : HTML5에 추가되었으며 양식 자동완

2022년 2월 12일
·
0개의 댓글
·
post-thumbnail

Wecolor Picker 컴포넌트

색 추출 방법아래 사진에서 사용된 색의 hex 값을 알고 싶다면, 개발자도구의 color picker나 chrome 확장프로그램 'color zilla'를 이용해보세요.아이콘 이용 팁다양한 아이콘 도구들이 있지만, font Awesome을 이용해봅시다. 사용방법은 공식

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Weegle 검색바

색 추출 방법아래 사진에서 사용된 색의 hex 값을 알고 싶다면, 개발자도구의 color picker나 chrome 확장프로그램 'color zilla'를 이용해보세요.아이콘 이용 팁다양한 아이콘 도구들이 있지만, font Awesome을 이용해봅시다. 사용방법은 공식

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

display:flex

FLEX BOX FROGGY : https://flexboxfroggy.com/Justify-content속성flex-start: 요소들을 컨테이너의 왼쪽으로 정렬함flex-end: 요소들을 컨테이너의 오른쪽으로 정렬함center: 요소들을 컨테이너의 가운데로

2022년 2월 2일
·
0개의 댓글
·

position-relative, absolute, fixed

position웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성.position 속성을 이용하면 html코드 상관없이 텍스트나 이미지를 원하는 위치로 배치할 수 있고, 어떤 방식으로 놓을 지를 결정할 수 있음.static을 제외한 나머지 속성값들은 top, left

2022년 2월 2일
·
0개의 댓글
·

<input /> vs <textarea></textarea>

&lt;input>type="text"text를 입력하는 속성.대부분의 input type은 text 임.어느 텍스트나 입력할 수 있음.이름, id, 주소, 닉네임 등을 입력 받을 때 사용함.type="password"text와 비슷한 속성인데, 뭔가를 입력하면 까만

2022년 2월 2일
·
0개의 댓글
·

Table

Table관련 태그&lt;table> : 테이블을 감싸는 태그&lt;thead> &lt;tbody>&lt;tr> : table row, 가로&lt;th> : 제목 나타낼 때 사용 ( 굵어지고, 중앙 정렬 )&lt;td> : table data, 세로 colspan :

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

List

&lt;li>목록을 표현하는 태그&lt;ol>ordered list라는 의미로, 결과화면과 같이 목록에 숫자를 달아줌&lt;ul>숫자 없는 목록을 표현해줌목록은 항상 &lt;ul> 이나 &lt;ol> 태그로 감싸야 함nth-child()CSS selector를 표기하는

2022년 2월 2일
·
0개의 댓글
·

Margin auto

margin auto소를 가로 중앙에 오게 할 수 있음

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Block vs Inline

block element요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없음.inline element요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻 요소 성질 변경inline -> blockinline 성질을 갖도록 하는 CSS property는 displ

2022년 2월 2일
·
0개의 댓글
·

이미지

&lt;img>alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트src: 이미지 파일 경로 or 이미지 url 주소widthheight가로/세로 중에서 하나의 값만 입력하여도, 브라우저에서 알아서 같

2022년 2월 2일
·
0개의 댓글
·

CSS selector

selector 결합selector 우선순위이 우선순위는 점수 계산으로 이루어집니다.inline styling(13줄에 style 요소로 직접): 1000점id: 100점class: 10점tag: 1점

2022년 2월 2일
·
0개의 댓글
·

상속, 그룹

상속말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일함그런데 p태그는 아무 스타일도 갖고 있지 않는데, 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경됨blockquot

2022년 2월 2일
·
0개의 댓글
·

box-sizing

디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데,디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됨.수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Border

border : 테두리border 작성법margin의 순서는, 순서대로 확정이지만border순서는 중요하지 않음. 전 세계적으로 약속된 coding convention(코딩 규칙) 지켜주는 게 좋음text-decoration속성p태그에 밑줄을 쳐주는 스타일밑줄의 두께나

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Margin & Padding

실질적인 박스가 차지하는 너비 : 요소의 너비 + padding+ border가 합쳐진 만큼273 + 50(왼쪽 padding) + 50(오른쪽 padding) + 5(왼쪽 border) + 5(오른쪽 border) = 383margin까지(주황색) 합쳐진 너비는 총

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Text Style

text-align텍스트 정렬은 왼쪽정렬, 가운데정렬, 오른쪽 정렬이 있음. property 이름은 text-align이고 값은 left, center, right모든 요소의 기본 정렬은 왼쪽 정렬&lt;span>에 오른쪽 정렬이 되도록 클래스를 부여했지만, 오른쪽 정

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Font Style

font family폰트 스타일을 지정하는 속성사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열함. 가장 뒤에 위치한 serif같은 폰트는 모든 브라우저에서 지원하는 폰트font sizefont weightfont-

2022년 2월 2일
·
0개의 댓글
·
post-thumbnail

Introduction to CSS

CSSHTML이 아름다워 보이도록 스타일을 입히는 것.CSS 적용inline style 빠르고 편함. 적용해야할 스타일이 많아지면 코드 가독성이 떨어짐.html 태그와 style코드가 혼재되어 있어 유지보수에도 좋지 않음.style 태그html 파일 내에 css를 작성

2022년 2월 2일
·
0개의 댓글
·