HTML&CSS&JavaScript(52)
-
[HTML&CSS] MySQL텍스트게시판 템플릿 구현, 게시물리스트, flex로 다시구현 연습
Developers HOME ARTICLES FREE NOTICE LINK BLOG GITHUB STATISTICS NOTICE LIST 번호 날짜 작성자 제목 9 2020-12-12 12:12:12 홍길동 제목1 10 2020-12-13 13:13:13 임꺽정 제목2 Developers Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, deleniti natus eligendi culpa ipsum assumenda quaerat dolor officia neque voluptate illum exercitationem id maiores nesciunt libero expedita ullam cum pariatur? /* 폰트 */ @fo..
2020.12.14 -
[HTML&CSS] 템플릿 구현, 전체 콘텐츠의 높이가 화면의 높이보다 작을 때 깔금하게 처리(feat.flex)
Developers HOME ARTICLES FREE NOTICE LINK BLOG GITHUB STATISTICS HOME Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, esse ullam nulla id unde ex dicta sequi, repellat temporibus quis amet ipsa provident magni veniam explicabo, repudiandae fuga in. In. Developers Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum eos ipsum necessitatibus doloremque quos voluptate de..
2020.12.10 -
[HTML&CSS] Flex 속성
이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 예를 들어, justify-content: flex-end;는 개구리를 오른쪽으로 이동시킵니다. 이 CSS 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬합니다: flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 ..
2020.12.09 -
[HTML&CSS] overflow
-요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정 -overflow-x: X축, 가로 제어 -overflow-y: Y축, 세로 제어 visible: 기본 값, 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다. hidden : 넘치는 부분은 잘려서 보여지지 않습니다. scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.) auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.) (출처: https://offbyone.tistory.com/296 [쉬고 싶은 개발자])
2020.12.04 -
[HTML&CSS] box-sizing
box-sizing: border-box; : padding이나 margin을 줘도 주변 틀에 영향을 미치지 않도록 해줌
2020.12.04 -
[HTML&CSS] @media
@media ( min-width:1000px ) { .cell { width:33.3333%; } } @media ( max-width:999px ) and ( min-width:500px ) { .cell { width:20%; } } @media ( max-width:499px ) { .cell { width:10%; } }
2020.12.04 -
[HTML&CSS] 라이브러리, 커스텀 개념(feat.con-min-width, con)
-라이브러리: 범용적으로 활용하는 것 -커스텀: 해당 사이트만의 특징? 개성? 같은 개념으로 범용적이지 않은 것은 커스텀으로 분류 -con-min-width: 사이트 화면에서 틀 크기(최소너비)를 지정하는 것, 처음 시작할때 정하고 시작하는 것이 좋음 -con: con-min-width의 자식, 전체 틀 안에 섹션 개념 /*라이브러리*/ .con{ margin-left:auto; margin-rtight:auto; } /*커스텀*/ .con-min-width{ min-width:1200px; } .con{ min-width:1200px; }
2020.12.04 -
[HTML&CSS] float(feat.clear)
#float -float 라는 단어는 원래 ‘뜨다’ 라는 의미 -웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. -float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줌 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)- -float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다. inherit: 부모 요소에서 물려받음 initial: 기본값으로 설정함 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위..
2020.12.04 -
[HTML&CSS] :root 가상선택자
-CSS의 변수의 접근은 자신의 부모 엘리먼트에 선언된 변수에만 접근할 수 있다. -그래서 일반적으로 CSS에서 변수를 선언할 때는 :root라는 가상선택자를 이용해 최상위 엘리먼트에 선언하여 모든 엘리먼트에서 변수를 사용할 수 있도록 하는 것이 보편적이다. 1. 단순 사용 .box { background-color: var(--red); } 위처럼 단순하게 변수를 참조하기 위해서는 var이라는 예약어와 괄호를 만들고 괄호 안에 변수명을 입력해주면 된다. 2. 변수값이 유효하지 않은 경우 .box { background-color: var(--red, #F00); } var 에 파라미터를 하나 더 포함시킬 수 있는데 이것은 입력한 변수가 유효한 값이 아닐 경우 적용되는 기본 값 정도로 이해하면 되겠다. ..
2020.12.04 -
20.12.03 HTML&CSS 반응형 레이아웃 연습
완료 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS 단가라 OPS COPYRIGHT (C) 2015 AVISTA INC. ALL RIGHTS RESERVED /* 노말라이즈 시작 */ html, body { /* 어떠한 경우에도 body 에 가로스크롤바가 생기지 않습니다. */ overflow-x:hidden; } body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; } /* 노말라이즈 끝 */ /* 라이브러리 시작 */ .con {..
2020.12.03