목록CSS (3)

기억하기 위한 기록

[웹사이트] 반응형 헤더 만들기 (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
[CSS] HTML문서에 CSS를 사용하는 3가지 방법

외부 스타일 시트(External Style Sheet) 내부 스타일 시트(Internal Style Sheet) HTML태그내에 스타일 지정(Inline Styles) 외부 스타일 시트(External Style Sheet) css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. 내부 스타일 시트(Internal Style Sheet) HTML문서내에서 사이에 스타일을 정의하는 방법입니다. HTML태그내에 스타일 지정(Inline Styles) 위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다. 이 문단의 색상은 회색으로 지정됩니다. 이 문단의 색상은 회색으로 지정됩니다. 외부css..
Front-end/css 2021. 4. 23. 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
이전 Prev 1 Next 다음