본문 바로가기
728x90

분류 전체보기463

비주얼 스튜디오 코드 50 _ Parallax02 html 골격 만들기 nav 생성 contents thml생성 css 편집 편집할 태그 셋팅하기 #nav 픽스하기 position : fixed; 그라디언트로 각 페이지에 배경색 채우기 #nav 편집 float을 위치잡기 menu 위치 편집 li 가 블럭 구조이기 때문에 옆으로 나열하기 위해 inlne 구조로 변경해주고 a태그는 인라인구조와 블럭구조 성격을 가질 수 있도록 inline-block 구조로 변경한다. active 시에 글자색이 변경되도록 글자색 변경한다. h2 편집 패럴럭스 이벤트 생성 active 시에 글자색이 변경되도록 글자색 변경되는 이벤트 쿨또 menu1 menu2 menu3 menu4 menu5 menu6 Time is gold Seeing is believing Asking cos.. 2023. 6. 27.
비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴 Notice 3 만들기 column col2 편집 css 편집 .notice3 이미지 사이즈와 li 위치 잡아주기 li에 패딩값을 주어 위치를 잡아준다. (좌표값을 계산해서 잡아주어야한다.) a, span 태그가 인라인 구조여서 한 줄로 나열이 된다. 줄이 떨어지기 위해서 블럭구조로 바꾸어 행이 바뀌도록한다. html에 더보기 넣기 a태그로 더보기 만들어주기 더보기 css 위치 잡기 더보기 a태그 블럭구조로 변경해주고 크기를 지정 백그라운드 이미지 백그라운 포지션을 넣어 이미지를 배치해준다. clumn col5 편집 제목 써주고 ir_su로 글씨 감추어주기 탭메뉴 만들기 ul > li 로 목록 만들고 li 중 한개 의 li 에 class= "active" 를 지정해준다. 공지사항1 ul > li안에 내용.. 2023. 6. 27.
비주얼 스튜디오 코드 48_Parallax menu1을 클릭했을 때 section1이 나올 수 있도록 링크를 걸어준다. 나머지 section 내용 넣어주기 css reset 넣어주기 css 편집 셋팅 #contents 편집 ●background: radial-gradient (ellipse farthest-corner at center center, 색상코드 영역(0%), 색상코드 100%) 멀리있는 코너부터 서서히 바꾸어줘라 나머지 #section 도 백그라운 그라데이션 넣어주기 #nav 편집 ● position: fixed; nav 고정시키기 패럴럭스 J-Query 이용해서 script 넣어주기 꼭지점(offset) 찾기 메뉴를 클릭하면 해당 section으로 창이 뜬다. 2023. 6. 26.
비주얼 스튜디오 코드 47_ 반응형 레이아웃 레이아웃 01 ●header태그: 헤더는 로고와 네비가 포함된 영역 ●aside태그: css편집 바탕색은 body에서 주면된다. ●aside, section 이 float으로 띄워져 있기때문에 footer가 aside, section 밑으로 겹쳐서 들어가게된다. footer 영역에 clear:both를 주어 aside, section영역 바로 아래에 위치된다. ●반응형 @media 영역 화면너비 0~1200px 화면 너비에 따라서 화면 스타일이 다르게 나오게 된다. 화면의 크기에 따라 스타일을 따로 준다. #wrap 너비값으 100%는 wrap이 꽉 차지만 95%는 양쪽 여백이 나온다. wrap이 1200px 이기 때문에 최대크기를 1200px를 하면 충돌이 날 수 있다. 그래서 좀더 큰 크기인 1220.. 2023. 6. 26.
[JAVASCRIPT] 4. 마우스 오버 효과 01 e.preventDefault() a태그 링크를 걸리지만 기본 명령어를 무시하고 원하는 명령어를 넣어보기 e.preventDefault(); 기존 명령어를 삭제함 네이버 02 마우스 오버 효과 ● mouseenter : = mouse hover 박스 핑크로 변했다가 마우스 떼면 아쿠아색으로 바꿔주기 scale 키웠다가 원래 크기로 변경해주기 같은 방법(너비 높이 값 지정) 03 반복된 요소에 이벤트 한꺼번에 연결하기 ● querySelectorAll 요소를 한꺼번에 지정 let : 변하는 값 e.preventDefalut(); 기본으로 갖고있는 명령어를 멈춤 item1 item2 item3 item4 04 클릭이벤트를 발생할 때 증가, 감소하는 프로그램 1씩 증가 1씩 감소 증가 감소 05 박스 돌.. 2023. 6. 23.
비주얼 스튜디오 코드 46_ flex 01 자식 요소의 배치방법을 지정하기 컨텐츠에 flex를 사용하면 편리하게 사용할 수 있다. html 골격 css 편집 section, article > 영역잡아주기 article 옆으로 flex를 이용해서 정렬하기 display: flex; >> 옆으로 나열 display: iline-flex; - in-line 구조 dispaly: flex; - block 구조 flext-direction: column; 세로로 자식을 정렬 flext-direction: 가로로 자식을 정렬 display: flex; align-item: center; justify-content: center article 안 요소 가운데 정렬 flext-direction: column-reverse; 세로로 자식을 반대로정렬 fl.. 2023. 6. 23.
728x90
반응형

티스토리툴바