'Frontend' 카테고리의 글 목록 (28 Page)

[생활코딩][CSS] media query, 반응형 웹,flex와 같이 사용하기

media query : 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS 기능 (반응형 디자인의 핵심 기능) 사용법: @media 선언 후 ()소괄호 안에 스크린 조건을 적습니다. {}중괄호 안에는 해당 스크린 조건을 만족할 때 적용할 엘리먼트와 적용시킬 CSS를 기입합니다. (max-width) 최대 / 즉, 최대치보다 이하일 경우 (min-width) 최소/ 즉, 최소치보다 이상일 경우 ※미디어 쿼리를 작성할 때, 스크린의 크기가 작은 것이 아래로 오게 작성해야 합니다. Cascading개념을 유념하고 큰 범위가 아래로 오지 않도록 주의하면서 작성하도록 합니다. ~500px : red 501~600px : green 601px~ : blue 또한 브라우저에서 F12(검사)를 해서 반응형..

Frontend/CSS, HTML 2021. 12. 10. 22:44

[생활코딩][CSS] flex2(holy grail layout 레이아웃 짜기, Properties for flex-cont, items)

성배 레이아웃은 사람들이 성배를 찾기 위해 노력하지만 못찾은 것처럼 완벽한 레이아웃만들기에 비유해서 만들어진 말입니다. 위와 같은 레이아웃을 비유적으로 성배 레이아웃이라 하는데 이 모양을 만들어내는데 flex를 사용하면 간편하게 달성할 수 있습니다. 생활코딩 html css javascript AD 홈페이지 ->main에 있는 lorem1000 부분은 양이 너무 많아서 주석 처리 해놨습니다. main 내부에 content를 랜덤으로된 1000글자를 주면 성배 레이아웃의 모습을 제대로 볼 수 있습니다. Properties for the flex container flex-direction row /*기본값*/ row-reverse column column-reverse flex-direction row /..

Frontend/CSS, HTML 2021. 12. 9. 22:43

[생활코딩][CSS] flex(flex-basis, shrink, grow)

flex - 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구, 레이아웃을 효과적으로 표현 가능 부여되는 속성을 나타낸 차트▼ Container item display order flex-direction /*기본값: row 행의 방향 column 수직*/ flex-grow /*기본값 0*/ flex-wrap flex-shrink flex-flow flex-basis justify-content flex align-items align-self align-content container에 height를 지정해주어야 flex의 효과를 제대로 알 수 있습니다. item관련 flex속성 flex-basis flex의 방향에 해당되는 엘리먼트의 기본크기를 설정하는 속성, row 면 가로폭 , column이면 세로폭..

Frontend/CSS, HTML 2021. 12. 8. 21:45

[JavaScript]#27 날씨정보 표기하기(날씨API 사용해보기),fetch()

보호되어 있는 글입니다.

보호글 2021. 12. 2. 21:32

[JavaScript]#26 todo list만들기5(투두 리스트 삭제하고 업데이트하기2), filter()

보호되어 있는 글입니다.

보호글 2021. 12. 2. 20:52

[JavaScript]#26 todo list만들기4(투두 리스트 삭제하고 업데이트하기)

보호되어 있는 글입니다.

보호글 2021. 12. 1. 22:31

[JavaScript]#25 todo list만들기3(투두 리스트 저장하고 업로드하기)

보호되어 있는 글입니다.