본문 바로가기

전체 글69

[CSS] 이미지 크기 비율에 맞게 줄이기 이미지 크기가 안맞아서 당황했던 적이 있다. 그래서 오늘은 이미지 비율을 맞추는 방법에 대해서 설명하려한다. 방법 1 ▶ 너비와 높이 중 하나만 지정해주기 : 너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어듦 ( 만약 다른 CSS에 영향을 받는다면 나머지에 auto 명시 ) ​ 방법2 ▶ 너비와 높이 둘다 지정해주기 (1) : 너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 너비와 높이는 auto로 두고 max-width, max-height를 주어 크기 제한하기 ​ 방법3 ▶ 너비와 높이 둘다 지정해주기 (2) : 배경이미지로 주고 background-size: contain;를 적용하기 ​ contain => contain 값으로 지정하면, 배.. 2022. 2. 12.
[CSS]상속되는 요소 / 상속되지 않는 요소 ♥ 상속되는 프로퍼티 font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style ♥ 상속이 되지않는 프로퍼티 margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height ✋🏻 여기서 잠깐 !! 상속이 되지 않는 프로퍼티라고 해서 꼭 상속을 받을 수 없는 것은 ❌❌❌❌!!!! inherit을 쓰면 상속을 받을 수 있다. inherit을 써주면.. 2022. 2. 12.
Westagram Login-page (HTML & CSS & JavaScript) HTML 구조도 Westagram 로그인 비밀번호를 잊으셨나요? ​ 간단하게 form구조를 사용해서 만들어보았다. 이미지의 경우는 너비에 따라 비율에 맞게 자동으로 높이가 형성되기 때문에 너비와 높이값을 안주었고 그 외의 영역들은 내용 + padding으로 높이를 설정했다. 내가 Bottom-Up방식을 사용한 이유는 ?? 즉 가장 큰 전체를 감싸고 있는 요소인 wrap에는 특정한 고정된 값을 주는 것이 아니라 오직 padding만 특정한 값을 주고 그 안에 있는 로고나 input, button들에게만 width로 특정한 고정된 값을 줌으로써 차후에 기획 등이 바뀌어도 상위의 구성요소들의 값 또한 바꿔줘야하는 불상사를 막기 위해서다. 앞에서 설명한 이러한 CSS 방식을 Bottom up 방식이라고 한다. .. 2022. 2. 12.
Westagram main-page (HTML & CSS & JavaScript) 인스타그램을 모티브로 위스타그램을 만들어 보았다. 가장 먼저 레이아웃 틀부터 잡아주었다. 위 사진처럼 feeds태그와 main-right태그를 묶어줄 wrap태그를 만들고 wrap태그를 묶어줄 main태그 그리고 메뉴바인 nav태그까지!! 전체 레이아웃 구조를 위 사진과 같이 만들어주었다. nav태그를 만들기 전에 가장 먼저 생각해야 할 것은 각 요소들을 어떻게 배치해서 만들것이냐에 대한 고민이다. 가로배치를 해야하기때문에 nav태그안에 3개의 요소들을 각각 파란틀로 만들어준 후 각각의 파란틀안의 요소들을 또 div태그로 잡아주었다. 물론 메뉴바이기때문에 ul태그로 묶어서 li요소들로 배치해서 만들어주어도 된다. 메뉴바는 엄청 중요한 요소가 아니기때문에 div태그를 써서 만들든, ul태그를 써서 만들든 .. 2022. 2. 12.

티스토리툴바