프로필사진
FE_Log
JunO3O
홈
방명록
전체글
검색
카테고리
태그 보기
즐겨찾기
태그 목록
목록태그 박스 속성 css 배경 속성 요소 배치 글자태그 the web developer bootcamp 반응 선택자 CSS 단위 입력 양식 display 속성 vscode 후손 선택자 공간 분할 구조 선택자 중앙 레이아웃 위치 속성 태그 선택자 html 속성 선택자 글자 속성 Udemy 자손 선택자 글자 생략 아이디 선택자 그레이디언트 상태 선택자 수평 레이아웃 one true 레이아웃 유동 속성
즐겨찾기
Copyright © Design Maker - vlo.
FE_Log

전체 글(50)

유용한 CSS 속성들
댓글수 · 2023.03.21
불투명도 / 알파 채널 rgba ㅁ rgba : rgba는 rgb에 알파(alpha)를 추가한 것으로, 알파 채널은 색상이 비치는 정도(=투명도)를 결정합니다. rgba(___, ___, ___, __알파___); /* 알파 자리에는 0부터 1까지의 숫자가 들어가며 0은 완전 투명, 1은 불투명을 의미합니다. */ ex) ㅁ alpha가 0일 때 = 투명 section { width : 500px; height : 500px; background-color: #ef476f; } #rgba { width : 50%; height : 50%; background-color: rgba(214, 204, 194, 0); /* alpha가 0인 경우 완전 투명하게 됩니다. */ /* background-color..
CSS 박스 모델
댓글수 1 · 2023.03.21
박스 모델 : 박스 모델은 아래와 같이 영역으로 구분됩니다. 가로, 세로 - width, height : 박스 모델의 content 영역은 가로(width)와 세로(height)를 통해 크기를 정합니다. : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model : 크롬의 개발자 도구를 통해 클릭한 content의 영역 크기를 보면 567 x 57 이라는 것을 알 수 있습니다. : width 와 height 에 CSS 를 적용하면 박스의 크기가 바뀌게 됩니다. div { width : 200px; /* width 는 가로 크기 */ height : 200px; /* height 는 세로 크기 ..
CSS 선택자
댓글수 1 · 2023.03.21
전체 요소 선택자 : 기존의 CSS 규칙 selector { /* 선택자 { */ property : value; /* 속성 : 값; */ } /* } */ ㅁ 전체 선택자 사용법 : 특수 문자 * 은 전체 요소를 선택하여 스타일을 적용할 때 사용합니다. * { 속성 : 값; } ex) * { color : white; /* 모든 요소의 텍스트 색상을 흰색으로 적용합니다. */ background-color : black; /* 모든 요소의 배경색을 검정색으로 적용합니다. */ } ㅁ 요소 선택자 사용법 : h1, button 등 요소를 선택하여 스타일을 적용할 때 사용합니다. : 쉼표(,)를 이용하여 여러 요소에 같은 스타일을 적용할 수 있습니다. 요소 { 속성 : 값; } ex) * { color :..
CSS : 기초
댓글수 1 · 2023.03.21
CSS 란? : 프로그램 언어는 아니지만 문서를 시각적으로 표현하기 위해서 사용하는 언어입니다. : CSS를 입력하기 위해서는 규칙을 따라야 합니다. selector { /* 선택자 { */ property : value; /* 속성 : 값; */ } /* } */ MDN - CSS : CSS에는 많은 종류의 특성이 존재하는데 이를 다 외울 수는 없으므로 MDN의 CSS 페이지를 참고합니다. : https://developer.mozilla.org/en-US/docs/Web/CSS 내부 CSS / 외부 CSS : 내부 스타일시트 작성법은 내부 스타일시트 작성법 ㅁ 외부 스타일시트 작성법 : HTML 외부에 존재하는 CSS 파일을 HTML 파일에서 사용하기 위해서는 요소를 통해 경로를 연결시켜줘야 합니다...
HTML : 폼, 테이블
댓글수 · 2023.03.21
HTML 테이블 : 표는 2차원 행과 열 구조로 되어 있는 데이터 테이블을 말하는 것입니다. : 테이블을 만들기 위해 사용하는 태그입니다. : table row를 줄일 말로 표 안에 있는 셀들이 모인 행을 말합니다. : 헤더를 정의합니다. : 테이블 데이터 셀을 줄인 말로 단일 셀을 나타냅니다. : 표의 헤더 영역을 지정합니다. : 표의 여러 행을 묶어서 표의 본문을 구성합니다. : 테이블의 열을 요약하는 행들의 집합을 말합니다. : 표의 열을 묶는 그룹을 지정합니다. : 표의 설명 또는 제목을 나타냅니다. Foods and Ingredients Harmful to Dogs 강아지에게 해로운 음식들과 미치는 영향 문제 음식 문제 성분 섭취 후 증상 초콜릿 메틸잔틴 : 카페인, 테오브로민 구토, 탈수, 근..
미디어 쿼리
댓글수 · 2023.03.21
미디어 쿼리 # 미디어 퀴리 - 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하도록 하는 것을 미디어 쿼리라고 합니다. - https://colly.com 사이트의 경우, 브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라집니다. - PC 나 태블릿, 스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀝니다. # 미디어 쿼리 구문 - 미디어 쿼리 구문은 아래 형식을 기본으로 합니다. [only | not] 은 생략할 수 있습니다. @media [only | not] 미디어 유형 [and 조건] * [and 조건] 연산자 설명 and 조건을 계속 추가할 수 있습니다. , (쉼표) 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가합니다. ..
반응형 웹 디자인
댓글수 · 2023.03.21
반응형 웹 디자인 # 반응형 웹 디자인 - 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법입니다. - 다양한 화면 크기의 모바일 기기들이 계속 나오면서 그때마다 크기에 맞춘 사이트를 별도로 제작하는 것은 비효율적입니다. - 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 반응형 웹 디자인 입니다. # 반응형 웹 디자인의 장단점 - 장점 : 모든 스마트 기기에서 접속이 가능하다. : 가로 모드에 맞춘 레이아웃 변경이 가능하다. : 사이트 유지와 관리가 용이하다. - 단점 : 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부이다. : 즉, 모든 웹 브라우저에서만 지원된다. # 뷰포트(Viewport) - 뷰포트란 실제 내용이 표시되는 영역..
HTML : 시맨틱(Semantics)
댓글수 · 2023.03.21
HTML5 ? : MDN에 가면 HTML의 정의와 그 외의 것들을 볼 수 있는데, HTML이란 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용하는 것이라고 합니다. : HTML5란 HTML의 5 버전이라고 생각하면 됩니다. 블록(div) vs 인라인(span) 요소 : 블록(div) 요소는 박스 형태로 영역이 설정되며, width, height 크기 지정을 할 수 있습니다. : 인라인(span) 요소는 줄 단위로 영역이 설정되며, width, height 크기 지정을 할 수 없습니다. ㅁ div 와 span 의 차이 강아지(puppy)는 개의 새끼를 일컫는다. 강아지는 성체로 발달하는 과정에 있으므로 자라면서 털색이나 체형 등이 달라질 수 있으며, 정서적인 변화를 겪기..
1 2 3 4 ··· 7

티스토리툴바