본문 바로가기

분류 전체보기

 (32)
2022-10-28 [새싹 프론트엔드] grid 레이아웃 Grid Container(그리드 컨테이너) 그리드의 단위로는 % px vh fr 다 사용가능 혼용도 가능하다. fr은 전체화면의 몇만큼 차지할지 정해주는것 flex-gro와 비슷함 부모요소 속성 비고 작성 display: grid; 그리드로 디스플레이 변경하기 grid-template-columns 부모 안에 배치할 칼럼,로우 크기와 개수 grid-template-columns: 200px 200px 200px; grid-template-rows: 100px; width200px, heihgt: 100px인 box생성 grid-template-rows repeat 위처럼 template을 사용하면 코드가 길어지는 단점이 있다. 반복시켜 편의성을 높혀준다 grid-template-columns: repe..
2022-10-27 [새싹 프론트엔드] display: flex; flex란? - 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다. - 부모요소에 width를 주면 작동하지않는다 - flex는 items 의 개별크기보다 flex자체의 기능을 더 중요하게 생각하기 때문에container의 width가 100%; items의 width가 100px 이라할때 가로 사이즈가 줄어들면 자동으로 100px보다 작아진다.items의 크기를 무시한다. 단, 부모에 너비값을 줬을땐 무시하지않는다 -items의 heigh..
2022-10-26 [새싹 프론트엔드] 반응형 웹 2022-10-26 강의 내용 반응형 웹 뷰포트 미디어 쿼리 반응형 웹이란? pc, TV, 스마트폰 등 다양한 기기에 맞춰 반응하는 웹 사이트 사용자가 접속하는 기기,환경에 맞춰 화면크기가 자동 조절된다. 사용자가 굳이 확대하거나 스크롤 막대를 옮기거나 하는 수고를 최대한 줄일 수 있음 반응형 웹 사이트 예시 이전부터 많이 사용하던 사이즈였지만 요즘엔 더 다양한 스마트기기가 출시되어 더 다양한 사이즈를 고려해야한다. 반응형 웹의 장점 기기의 화면 크기나 해상도에 영향을 받지 않음 화면 변화에 즉기 반응 어느 기기에서도 사이트 주고가 동일 유지 관리가 편함 반응형 웹의 단점 사이트 디자인이 단순함 반응형 웹은 브라우저의 너비값에 따라 레이아웃을 변경하기 때문에 사이트의 디자인이 단순한 경우가 많다. 뷰포트..
2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점 강의 내용 폼 태그 폼 꾸미기 폼 요소란? , , 등등.... 사용자가 입력하거나 입력을 받는 걸 모두 폼이라고 부른다 input을 사용할때는 무조건 상황에 맞는 type을 사용해야한다. input의 유형 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95 input의 속성 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%EC%86%8D%EC%84%B1 form작성 label과 input은 짝꿍이다 이름 나이 제출 초기화 form안엔 네모칸 안에 할 수 있는 요소와 들이 들어간다. h(n) p태그와 같은 다른 태그도 들어갈 수 있다..
2022-10-25 [새싹 프론트엔드] 목록태그 강의 내용 목록태그 list 리스트 꾸미기 내비게이션 바 - 순서가 있는 리스트(ordered list) - 순거가 없는 리스트(unordered list) - 정의 리스트(definition list) 리스트 꾸미기 padding-left 가 기본적으로 들어가 있다. 내비게이션 바 우리가 흔히 사용하는 웹 사이트의 메뉴 주로 HTML의 링크 태그 를 사용하여 생성 수평 메뉴 만들기 1. display: inline-block을 준다. 2. float 속성을 사용한다. display: inline-block; 장점 1. 부모가 자식의 높이를 인식한다. 2. 사용하기쉽다. 단점 1. 자식간의 여백이 발생해서 정교한 디자인엔 어울리지 않는다. 2. 계산값을 잘못주면 레이아웃이 탈락한다. display: in..
2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 2022-10-24 학습내용 정렬 One True 레이아웃 절대위치 고정위치 글자생략 테이블 테이블 생성하기 테이블 병합하기 테이블 꾸미기 수평으로 요소정렬 float: left; , float: right; 를 주게 된다면 중앙 정렬이 불가하다. 왜냐면 float속성을주면 왼쪽 혹은 오른쪽으로 딱 붙는 성질이 있기 때문이다. 수평 가로 정렬일 경우 이럴때 float를 준 해당 태그의 부모태그에 width를 float와 같게 맞춰준 후 margin: auto; 를 주면 float받은 자식속상이 margin을 준 부모태그를 따라서 가운데로 이동한다. 수직 세로 정렬일 경우 (float를 받은 요소는 inline요소가 된다.) 부모요소에 line-height: 부모의 높이값을 주면 해당 컨텐츠 안에 있는 요..
2022-10-21 [새싹 프론트엔드] 강의정리 2022-10-21 강의 내용 위치속성 z-index 속성 overflow 속성 float 속성 position속성 -position 속성의 값은 body안쪽으로 움직이는건 + body 바깥으로 움직이는건 -이다. static 기본값 relative 본인자리 기준, 본인자리는 두고 본인만 움직인다. absolute static 이 아닌 부모의 기준대로 움직인다. 없으면 그 위의 부모 없으면 그 위의 부모를 계속 찾아가다가 끝까지 모~든 부모가 static 이면 body를 기준으로 잡는다. block요소라해도 inline처럼 본인 자리만 차기하게된다 fixed 고정된 위치 z-index 속성 이 아닌 요소들간 위아래 배치 순서를 정한다. 를 쓰지않았을때 기본 적용값 = auto(0과 같다) 음수양수 전부 ..
2022-10-21 box-sizing[새싹 프론트엔드] Di it 한권으로 끝내는 웹표준의 정석 box-sizing: border-box 란? - 요소의 적용된 padding, border 를 내가 정한 width와 height에 포함유무를 정해주는 속성 (margin은 바깥여백이므로 box크기에 영향받지않는다.) 예를들어 width,height가 100px인 박스 모델을 만들고 싶고 border: 10px, padding: 10px을 주고싶다고 가정할때 해당 박스모델의 크기는 100px이 아니라 140px이 된다 왜냐하면 border와 padding값이 width, height값에 포함이 되었기 때문이다 . 이것이 박스모델의 기본적인 속성이다. 이때 border와 padding을 포함한 100px의 박스모델을 만들고 싶을때 사용하는 속성이 box-sizin..
2022-10-20[새싹 프론트엔드] 강의정리 2022- 강의 내용 css 배경속성 background 단축속성 box 속성 display 속성 visibility 속성 box-shadow 속성 background 단축속성 background: color, image, position/size, repeat 순으로 값 지정 background: skyblue url (“apple.jpg") center /100px repeat y; display: none, visible: hidden 속성 display: none 본인의 자리 자체를 숨기기 자신의 자리를 아예 없애버려 다른 컨텐츠들이 인지하지못함 visible: hidden 본인의 모습은 숨기지만 자리는 남음 자신의 모습은 숨기지만 자리는 남아있음 이 경우 컨텐츠들이 인지함 box-shadow t..
2022-10-19 [새싹 프론트엔드] 강의정리 2022-10-19 강의 내용 키워드 단위 크기단위 색상단위 url 단위 font-size 속성 font-family 속성 기타속성 크기단위 단위 적용되는 기준 % 16px 기준 em 해당태그의 부모를 기준으로 배수로 커진다 (예시 1-1) rem ( root) 16 px 기준 예시 1-1 안녕하세요01 안녕하세요02 안녕하세요03 ​ px, %, em, rem 모든 폰드 사이즈는 자식요소에 상속되어 적용 된다 %,em,rem은 가변성을 가지고 있지만 그 기준이 "부모" 이기때문에 화면에 따라 크기가 변하진 않는다. 1. px: 픽셀단위의 절대값 고정된 크기 장치에 따라 크기 조절 불가 2. %: 부모요소의 상대적 크기 부모의 크기가 상속되어 커진다 (em도 마찬가지) 100% = 1em, 80%=0.8..

티스토리툴바