Peridott의 개발 블로그

반응형 웹 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus voluptatem voluptatibus adipisci at sunt ullam aliquam officia nisi, earum enim illo in tempore harum, quidem architecto necessitatibus excepturi tempora laudantium! Eos culpa ullam quaerat cum pariatur inventore velit vel. Quaerat, sequi sunt nostrum, eveniet officia magni mollitia per..

고정 그리드 레이아웃 본문 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda blanditiis est amet consequatur iste ut dicta consectetur! Doloremque odit itaque numquam dolores animi sequi a, porro iste tempore saepe minima? Officia modi ipsam veritatis sequi consequatur voluptates accusantium quos quaerat ut tenetur maiores suscipit illum nemo dolorum in..

flex 기본 축을 기준으로 정렬 * 부모요소 : flex-container - display: flex - flex-direction: row(기본값)|column|row-reverse|column-reverse - justify-content: 메인축 정렬(flex-direction: row이면 row, column이면 column) - align-items:크로스축 정렬(flex-direction: row이면 column) - flex-wrap: 줄바꿈여부 - align-content: 여러줄인 경우의 크로스축 설정 * 자식요소(정렬의 주체) : flex-item ..

semantic태그 의미가 있는 html4버전에서는 div태그의 id등을 통해 내용 구분 스크린리더는 영역별로 접근 불가 html5버전에서는 태그의 이름으로 태그의 내용을 유추 스크린리더는 영역별로 접근 가능 웹접근성 향상을 위한 태그 사용 태그 <header> 헤더부분 : 맨 상위에 위치하고, 회사 로고나 기타 헤더에 넣을 것들을 배치 </header> <nav> nav : 다른 페이지로 이동할 수 있는 네이게이션 정보. 위치가 자유롭다 </nav> <section> ..

배치 관련 스타일 position: 상대위치(relative)와 절대위치(absolute) 첫번째 자식 두번째 자식 세번째 자식 position: 고정위치(fixed) z-index : 요소들을 순서대로 위로 쌓는 속성 요소1 요소2 요소3 visibility: 특정요소를 보이거나 보이지 않게 하는 스타일 영역1 영역2 --> 영역2 영역3 visibility:hidden은 공간은 차지하고 있지만 display:none은 공간마저도 사라지게 함 float 페이지 내의 요소들을 화면..

요소 배치 스타일 width, height 기본적으로 내용을 차지하는 content영역의 가로, 세로 길이 조절 고정크기(px) 가변크기(%) display : 화면 배치 방법 변경 선택자 { display:inline|block|inline-block } * display:inline 첫번째 두번째 세번째 네번째 다섯번째 display:inline만 하게 되면 width와 height의 스타일 속성은 적용되지 않음 * display:inline-block 첫번째 두번째 세번째..

배경 관련 스타일(background~ ) background-color : 배경색을 지정하고자 할 때 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit necessitatibus atque perferendis deleniti magni doloremque fugiat pariatur commodi repellat incidunt dolores illum ipsam minima doloribus, asperiores eveniet nisi nesciunt quis. Non laborum nulla incidunt adipisci. Soluta nihil nulla facere magni deserunt ..

지원 블로그 식단표 월 화 수 목 금 토 일 쌀밥 잡곡밥 스파게티 짜장면 불고기 떡갈비 미니돈까스 오징어볶음 제육볶음 피클 단무지 배추김치 깍두기 미소된장국 동치미 고추절임 ..

테이블 관련 스타일 [표 1] 웹 브라우저의 종류 브라우저명 제조사 홈페이지 --> HomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepageHomepage Edge MS https://microsoft.com ..

테두리 관련 스타일 선택자 { * 테두리 스타일 border[-위치]-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset * 테두리 두께 border[-위치]-width: 테두리 두께; * 테두리 색상 border[-위치]-color: 테두리 색상; * 테두리 스타일, 두께, 색상을 한꺼번에 border: 두께 스타일 [색상]; * 테두리 모서리를 둥그렇게 border-radius: 반지름값; * 박스에 그림자..