HTML+CSS 썸네일형 리스트형 과제(8)-홈페이지 만들기 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*앞서 배운내용으로 과제 만들기 닷홈 홈페이지 연결1.메인페이지 이력서 홈 이 력 서 성명 한글 김대현 생년월일 1998.12.21 영문 DaeHyon Kim 블로그 https://young0378.tistory.com/manage/posts/ 휴대전화 010-7674-0721 이메일 heonk0378@naver.com .. 더보기 웹개발(14)-transform, transition, animation *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS 2Dtransform- 2차원 좌표에서 요소를 변형시키는 속성입니다.translate(이동)rotate(각도회전)scale(확대, 축소)skew(경사 비틀기)✔ 벤더 프리픽스(Vender Profix)- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사입니다. - w3c css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙입니다. -webkit- : 크롬, 엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -.. 더보기 웹개발(13)- 우선순위, css변수 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS 우선순위 계산1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선입니다. 2. 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선입니다. 3. 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용합니다. 4. 우선순위 계산: - inline: 1000점 - id: 100점 - class, 속성 선택자: 10점 - element: 1점 5. !important를 적용하면 0 순위로 적용합니다. CSS 우선순위 div 1번(인라인 스타일 우선) div 2번(id 우선) div 3번(class 우선) div 4번(같은 .. 더보기 웹개발(12)-미디어쿼리, em,rem *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*미디어 쿼리(media query) 1.반응형웹하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법입니다. @media 매체유형 and (속성에 대한 조건) { css 코드 ... } 미디어쿼리1매체유형 all: 모든 매체 screen: 컴퓨터, 태블릿, 스마트폰 .. print: 프린터 speech: 스크린 리더2. em과 rem 특징상대적인 크기를 정하는 단위입니다.em - 부모 요소 크기의 몇 배인지를 단위로 설정합니다. pc의 일반 텍스트 크기: 16px = 1em 모바일의 일반 텍스트 크기: 12p.. 더보기 웹개발(11)-float, layout *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. z-index- HTML: 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있습니다. - 겹쳐지는 요소들이 쌓이는 순서를 결정할 떄 z-index를 사용합니다. - 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됩니다. z-index 1번째 div 2번째 div 3번째 div 2. float- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듭니다. (나중에 layout이 더 쓰임) - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려집니다. - float를 적용받은 요소의.. 더보기 웹개발(10)-CSS position 지정 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*CSS position - 요소의 위치를 결정하는 방식을 설정1. 정적 위치 지정방식- static position (기본값) - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식을2. 상대 위치 지정 방식- relative position - HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식 - top, left, right, bottom 속성값을 사용하여 재설정함 상대 위치 지정방식 상대 위치 지정방식1 상대 위치 지정방식2 상대 위치 지정방식33. 고정 위치 지정방식- fixed posi.. 더보기 웹개발(9)-박스 모델(Box Model) *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*박스 모델(Box Model) - 모든 HTML 요소는 박스 모양으로 구성됩니다.- 박스 모델은 HTML 요소를 내용(content), 안쪽여백(padding), 테두리(border), 바깥여백(margin)으로 구분합니다.내용(content) - 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ( 파란색 부분)안쪽여백(padding)- 내용과 테두리 사이의 간격 또는 여백입니다.- padding-top, padding-right, padding-bottom, padding-left -padding: 위 오른쪽 아래 왼쪽 순으로 설정합니다. HTML 안녕하세요 CSS div#p.. 더보기 웹개발(8)-CSS배경 *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*background-color: HTML 요소의 배경색을 설정합니다. css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusantium quos asperiores architecto, doloremque eligendi recusandae aspernatur, nam adipisci accusamus quis voluptatum inventore, rerum dicta! Officia odio qui voluptatum excepturi quo. background-repeat: 배경 .. 더보기 이전 1 2 3 다음
