목록HTML (4)

기억하기 위한 기록

[웹사이트] 반응형 헤더 만들기 (toggle 버튼 간단 js활용)

*포인트* 정렬 관련 - display : flex ; - flex-direction : column ; - align-items : flex-start ; - justify-content : center ; - justify-content : space-between ; 토글버튼 관련 - document.querySelector - addEventListner - active ; > 클릭 될 떄마다 지정하는 함수를 호출해줘. > 토글버튼 활성화가 되면 menu를 display 해줘. 1. 를 작성한다. 2. 안에 li 태그들로 메뉴를 나열한다. 3. 안에 i 태그들로 아이코을 나열한다. 4. display : flex로 요소들을 정렬해준다. 5. 토글버튼을 폰트어섬에서 i태그로 가져온다. 6. 토글버튼..
Front-end/js 2021. 5. 25. 15:53
[HTML5] <meter> 태그 : 게이지바로 최적값 나타냄

처음 써보는 meter태그에 대한 개념을 적어본다. 태그의 optimum 속성은 범위(gauge) 내에서 최적값(optimal value)으로 간주될 값을 명시합니다. ㄴ> 일정 범위의 영역에서 얼마나 차지하는지를 게이지바로 표현. valul = "현재값" min = "영역최소값" max = "영역최대값" optimium ="영역 최적값" low ="낮은 값을 갖는다고 생각되는 영역" ㄴ> min low
Front-end/html 2021. 4. 26. 18:49
[잘난웹디] 한국소비자원 웹사이트제작 6강 _ section_news & footer

1. news section html코드를 작성한다. ㄴ> div로 두 영역을 잡아주고 issue 로 클래스명을 동일하게 묶어줌 2. news 영역의 width 값을 1400으로 주고, height는 자동으로 준다. 영역이 가운데로 올 수 있도록 margin 0 auto 를 준뒤 나란히 정렬될 수 있도록 보기 쉽게 green으로 영역을 표시해준뒤 작업한다. 3. issue 들을 전체 영역인 news에서 덜어트려 주기 위해 margin-top을 주고, width값을 준다. div마다 영역이 할당될 수있도록 49%로 일단준뒤 왼쪽으로 정렬하기 위해 float : left ;를 준다. ㄴ> issue에 작성해주고 난 처음에 먹여준 section.news에 bg 컬러가 사라진것을 볼 수 있다. 이유는 ? 자식요..
Front-end/html 2021. 1. 21. 16:38
[잘난웹디] 한국소비자원 웹사이트 제작4강_section happy

1. ul > li > 로 텍스트와 이미지를 넣어준다, ▼ 1번 결과 2. main section과 동일하게 width 값은 1400px로 변경해준다. 3. 가운데로 오게끔 margin 값을 조정해주고 margin { 0 auto; } , 함께 행복한 소비생활 h2가 가운데로 올 수 있도록 text-align:center; 해준뒤, 아래의 ul과 여백을 주기 위해 h2에 margin-bottom:50px;준다. ▼ margin-bottom :50px 한 결과값 4. ul은 section happy의 width인 1400px에 꽉 찰 수 있도록 100%를 준다. 5. 보기 편하도록 li를 float : left로 정렬해준다. 정렬하고 나니 우리가 4번에서 적용한 ul이 날라간것을 볼 수 있다. (yello..
Front-end/html 2021. 1. 20. 14:45
이전 Prev 1 Next 다음