# htmlcss

kirin

👉 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 트랜지션(transition)은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속

kirin

🎃 Object-fit object-fit 속성은 대체되는 요소의 내용(`, , , ` 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. background-size 속성과 매우 유사하다. 요소의 내용이 담길 width와 height 값을 지정해 준

sohyeonbak_oly

📍Project Summery TheCatAPI를 활용해 고양이 정보를 불러와 종에 따른 고양이의 상세설명과 다양한 사진을 볼 수 있다. 로그인을 통해서 마음에 드는 고양이 사진을 mypage에 담을 수 있고, my page에 담긴 고양이 사진을 클릭하면 상세 정보

qkrdudgh052

웹스토리지는 HTML5에서 쿠키의 단점을 보완해서 만든 기술이다. 기본적으로 웹스토리지는 key와 value 형태로 이루어져있다. 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장한다. 웹스토리지에서 쿠키의 가장 큰 차이점은 서버에 클라이언트에 대한 데이터를 저장하지 않

tjdgns503

position: relative; -> 처음 생성된 위치를 기준점으로 top,bottom,right,left로 위치를 수정할수 있다. // 초록색 box(첫 기준점)에 position: relative; 속성을 추가하여 top: -10px; left: -10px; 위

tjdgns503

웹사이트는 검색엔진에의 노출이 굉장히 중요하다. 만약 검색이 되지 않는다면 사람들이 사용을 하지 않을것이고 최상위로 노출되면 될수록 관심이 가기 마련이다.기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는것으로 부터 시작된다.검색엔진은 로봇(Robot)이라는

jeky22

모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.코드를 분석하게 되면 app.js에서 onClick()( imageInfo 즉, 모달창을 보이게 만들어 주는 함수 )이라는 메소드를 정의해서 params로 Sea

jeky22

문제 > #### 이미지 상세 보기 모달 관련 디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다. 필수 이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC

jeky22

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.992px 이하: 3개768px 이하: 2개576px 이하: 1개현재 템플릿 코드를 통해 실행시킬 경우 image들이 같은 사이즈로 질서있게 정렬이 된 모습

yeonlisa

모든 콘텐츠는 각자의 영역을 가지며, 보통 엘리먼트로 묶이는 콘텐츠가 하나의 박스가 된다.박스는 항상 사각형이고 그 너비(width)와 높이(height)가 있다.block 박스 : 줄바꿈이 되는 박스inline 박스 : 옆으로 붙는 박스inline-block 박스 :

yeonlisa

글자 색상으로는 color 속성을 사용한다.값으로는 HEX(16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상 이름을 사용할 수 있다.배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있다.글꼴은 font-family 를 사용한다.글

yeonlisa

CSS 규칙을 적용할 요소를 정의한다.참고 : http://tcpschool.com/

yeonlisa

CSS는 웹 애플리케이션의 모양새를 담당한다.더 나은 사용자 경험(UX : User Experience)를 갖기 위해 필요한 세가지 요소가 있다.1\. 적당한 위치에 콘텐츠 배치 (레이아웃)2\. 텍스트 강조와 같은 최소한의 타이포그래피 (조판, typography)3

yeonlisa

HyperText Markup Language웹 페이지의 틀을 만드는 마크업 언어HTML은 tag의 집합이라고 할 수 있다.Tag란 부등호(<>)로 묶인 HTML의 기본 구성 요소이다.tag로 시작하여 tag로 끝난다.html 확장자를 사용한다.HTML 구조는 부

jeky22

문제 > 1. 현재 HTML 코드가 전체적으로 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다. 다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다. 2-1. CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.

sms8377

우선순위는 아래와 같이 적용 됩니다.속성 값 뒤에 !important 를 붙인 속성HTML에서 \[style](https://ofcourse.kr/html-course/%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%86%8D%EC%84%B13. 4.

sms8377

Inline Style<style><link rel="stylesheet" href="...">위 방식은 Inilne Style로, 직관적으로 사용이 가능하다는 장점이 있습니다.하지만 내용과 스타일이 분리되지 않고, 이로 인해 스타일 일괄변경의 효율성이 떨어

sms8377

블럭 레벨과 인라인 레벨을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다.블럭 레벨 엘리먼트는 한 Line에 하나만 위치할 수 있습니다.반대로 인라인 레벨 엘리먼트는 한 Line에 두개 이상 위치할 수 있습니다.위와 같이 블럭레벨 엘리먼트

sms8377

한때 IE는 가장 우수한 브라우저 였습니다.하지만 최근에는 정말 많은 웹사이트들이 IE 지원중단을 선언하였습니다. 유튜브에 접속하면 IE가 곧 중단 된다고 경고문까지 발생합니다.1996년에 발표된 IE 3.0은 최초로 CSS를 지원하는 브라우저였고, IE 5.0 같은 

sms8377

HTML 4.01 버전은 1999년에 등장한 HTML의 버전입니다.HTML 4.01 버전에 와서야 국제화를 이루게 되었다고 합니다. 이때부터 전 세계 언어를 모두 수용할 수 있게 되었습니다. 또한 색인 기능이 추가되어 효율성이 좋아졌습니다.또한 4.01버전은 접속성의