본투비곰손

display:flex 레이아웃 구성시 수평/수직 구조를 쉽게 만들어 줄 수 있는 display 속성 container안에 items를 수직으로 쌓는 구조 flex-direction: row (세로형,기본값,좌측부터 정렬) flex-direction: column(가로형,위쪽부터 정렬) flex-direction: row-reverse(세로형,우측부터 정렬) flex-direction: column-reverse(가로형,아래쪽부터 정렬) 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 row , row-reverse column,column-reverse flex-wrap:nowrap items의 가로값의 합이 container의 가로 값 보다 크게 설정되어도 무시하고 가로값에 균일하게 채워진다..

Front-end/HTML 2023. 6. 17. 15:06

1. 기본 구조 과제 폴더 ┌ css ├ image └ js 과제폴더에는 html파일을 저장하고 css 과 그림 ,js 는 별도의 폴더를 만들어 관리한다. ​ 2. ​ html에 meta가 추가 되는데 의미는 (meta태그란 웹페이지의 정보를 제공하는 태그이다.) ​ content="width=device-width : meta name은 "viewport" 인 meta 로 선언 content="width=device-width : 가로길이는 각각의 기기의 가로 길이 initial-scale=1.0 : 초기 화면 비율은 1.0 maximum-scale=2.0 : 최대 비율 2배까지 확대가 가능 minimum-scale=1.0 : 최소 비율은 1.0 user-scalable=yes : 사용자가 비율을 변경..

Front-end/HTML 2023. 6. 16. 22:21

background background는 가장 많이 사용하는 CSS속성이다. 배경색을 주거나 배경이미지를 배치하는등에 사용된다. 1. background-color 배경색을 정해주는 속성으로 hex코드 또는 rgb,rgba등으로 지정해 줄 수 있다. hex코드-#aaaaaa rgb-(170, 170, 170) rgba-(170, 170, 170,1) a값은 명도이다. 0에 가까울수록 투명해지고 1에 가까울수록 진해진다. 2. background-image background-image : url(이미지 경로)을 사용하여 원하는 이미지를 배경에 넣을 수 있다. 단, 크기가 다르다면 반복적으로 이미지가 채워진다. .bg{ width: 500px; height: 500px; margin: 10px; backg..

Front-end/HTML 2023. 6. 10. 00:14

animation 별도의 동작 조건없이 스스로 애니메이션 효과를 발생시키는 속성 1.사용방법 @keyframes 원하는이름{ %값{css속성} } 선택자{animation:원하는이름 시간s 반복 횟수} 페이지를 출력하면 원하는시간을 %값으로 배분하여 5회 왕복 한다. 0%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 0초 돌아올때 10초//도착지부터 시작함) 20%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 2초 돌아올때 8초) 50%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서부터 목적지까지 도착하는데 5초 돌아올때 5초) 80%{css속성} (애니메이션 시간이 10초일 경우 처음 시작지점에서..

Front-end/HTML 2023. 6. 7. 22:32

table태그 표를 만들어 주는태그 1. table 표의 시작을 알리는 태그 ul,section,form 과 같은 역할 2. caption 표의 제목을 나타내는 태그로 width의 갑이 없어도 표의 최대길이로 설정되며 글자가 중앙정렬 된다. 3. th 표의 서브 제목으로 작성된글자가 굵게 표시되며 중앙정렬 된다. 4. tr , td 행태그, 열태그 5. colspan 가로열을 병합해주는 태그로 과 같은 형식으로 사용한다. 6.rowspan 세로열을 병합해주는 태그로 과 같은 형식으로 사용한다. 7. scope th에만 사용하는 속성으로 가로 또는 세로열의 제목을 정의해준다. scope="row" 가로 제목 정의 / scope="col" 세로 제목 정의( 브라우저가 명확하게 th성격을 인지) 메인제목 서브..

Front-end/HTML 2023. 6. 7. 00:01

스프라이트 이미지 여러개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법으로 하나로 합쳐진 이미지에서 필요한부분(주로 아이콘)을 추출하여 사용하는 개념이다. 파일명이 sprite.png인 하나로 합쳐진 이미지 한장 원하는 크기를 만들어주고 background-image:url("sprite.png")사용하여 이미지를 불러오고 background-position:0px 0px 을 사용하여 필요한 아이콘을 지정 한다. background: url('css_sprites.png') -10px -10px 속성을 이용하여 동일하게 사용 할 수 있다. 출력물은 아래와 같다. 대표사진 삭제 사진 설명을 입력하세요. 가로 , 세로 px 값을 변경하여 원하는 이미지를 찾아 적용하면 된다. 가각의 이미지를 하..

Front-end/HTML 2023. 6. 6. 23:59

transform 1. transform:rotate (deg 값) 입력한 각도 값 만큼 회전 시켜주는 css속성 시계방향으로 45º 회전한다. 2. transform:scale(가로배수값,세로배수값) 입력한 배수값만큼 대상태그의 크기를 조절하는 css속성 width,height 값으로 크기를 조절하면 한방향으로 길이가 늘어 나지만 scale를 사용하면 양방향으로 크기가 늘어난다. 또한 width,height값으로 크기를 조절할 경우 다른 태그가 밀리거나 당겨지는데 scale를 사용하면 태그를 무시하고 늘어나거나 줄어든다. 기존의 크기보다 작게 조절하고 싶다면 배수의 값이기 때문에 -값이아닌 소수점 단위를 사용하면 된다. 3. transform:skew(x축deg값,y축deg값) transform:ske..

Front-end/HTML 2023. 6. 5. 23:25

z-index html을 작성하게되면 고유의 z축 값을 가지게 된다. 눈에 보이지는 않지만 나중에 작성되는 태그의 경우 그값이 높아진다. (쉽게 포토샵의 레이어같이 나중에 작성되는 태그가 먼저작성된 태그에 쌓인다고 생각하면 된다.) z-index값이 고유의 값이긴 하지만 css속성이기때문에 임의로 값을 수정 할 수 있다. z-index는 종류와 상관없이 position과 사용해야 적용된다. 1번상자 2번상자 3번상자 1번 상자를 맨위쪽으로 위치시키기위해 z-index값을 역순서대로 주었다. ※position 속성은 종류와 상관없이 태그에 사용 할 경우 z-index값은 최상위 값으로 변경된다. 1번상자 2번상자 3번상자 2번째 태그와 3번째 태그위로 position:absolute를 적용한 1번째 태그가..

Front-end/HTML 2023. 6. 4. 23:39