조반짝의 도전일지

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..

_배너 배너에 이미지 넣기 h2 - 제목 넣기 img - 배너 이미지 넣기 css- 제목 위치 잡아주기 배너 html 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스 안내 행사 안내 행사 일정 소공연장 홍보마당 축제 소식 보도 자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 부여연꽃축제 공지사항 부여 연꽃 축제기간이 06월 15일부터 시작됩니다. 05-30 연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다. 05-25 서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다. 05-25 부여 연꽃 보러 많이 많이 오세요. 05-24 갤러리 바로가기 바로가기 바로가기 바로가기 바로가기 바로가기까지 css @charset "utf-8"..

외부 css 사용시 html에 css 링크 꼭 걸어주기 * web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다. 박스 만들어주기 section으로 만들어주기 01 rotate : 회전 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) CSS3 Transform rotate(45deg) rotateX(45deg) rotateY(45deg) @charset "utf-8"; *, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f3f4; t..

concept(overview, color(주조색,보조색,강조색)) > logotype(텍스트, 아이콘), 로고설명, 로고 치수 > main font(영문,한글) 두께 > wire frame(골조), 레이아웃 TOOL: 피그마/포토샵/일러스트레이션 Reference > 회사의 웹페이지를 벤치마킹 웹페이지 주제정하기: 반응형X , 팀프로젝트(개발), 반응형 헤더(Header) 배너(Banner) 컨텐츠(Contents) 푸터(Footer) 비주얼 스튜디오 코드 _확장프로그램 Live Server 설치 extensions > live server 설치 live server : 미리보기 프로그램 하단에 Go Live라고 뜨면 실행가능한 상태이다. html 5 css: css3버전, 바디의 속성을 바꿔줌 *포토..

01 filter img: 자기 영역이 있음 인라인 구조 사진과 사진사이에 여백이 있음 여백을 없애고 싶다면? 인라인 구조를 블럭구조로 바꾸면 된다. display: block; filter: blur(치수) _ 흐림효과 filter: brightness(치수) _ 밝기효과 : 0:검정색 / 1: 원본컬러 filter: contrast(치수) _대비 filter: grayscale(치수) _흑백변환 02 box-sizing box-sizing: border-box 패딩값을 포함해서 박스사이즈를 출력해줌, 즉 패딩값을 줘도 박스사이즈가 변하지않는다. 초기화할 때 사용

크롬설정하기 manage > settings > extensions > live server config > custom browser > chrome 변경 화면 셋팅하기 _ 글자 한문단에 계속 이어지는 것 방지하기 manage > settings > search settings에서 word 검색 > word wrap 찾아서 wordwrapColumn 설정 하기 배너 이미지 적용 이미지 넣을 부분에 주석처리 해주어 이미지를 대체한다. 주석처리: ctrl+/ [배너 이미지 넣기] #banner 안에 background: url( . /폴더/파일이름) . 은 자기자신: index.html 안에 있는 폴더 .. 은 상위폴더(부모폴더) margin: 바깥여백, 컬러값을 넣으면 박스의 여백이 늘어남 padding..

[텍스트 관련 요소 태그] [글자크기 변경] 확대 ctrl+ + 축소 ctrl+ - [새로만들기] 파일 > 폴더열기 > 오른쪽마우스 > NEW FILE > index.html 작성 > 오른쪽창에 ! 엔터 html lang- " en" > english viewport : display > 1:1 로 들어가겠다 안들어가면 반응형이 안됨 코딩: ~ div : 블럭 사각형이라고 생각하기 인라인 구조 : 텍스트구조 div 구조: 사각형구조 body 안에 div를 넣어줘야함 4개의 div 가 필요함 : 헤더 / 베너 / 컨텐츠 / 푸터 내부스타일 div 이름정해주기 > 선택자 아이디로 설정 html > id id = " 000 " > 000 더블클릭에서 복사 붙여넣기 div > # header / w , h , ..