개발자연습노트

CSS 덮어쓰기가 매우 중요합니다.  왜냐면 여러분 업무의 절반 이상은 이미 작성된 CSS 수정이니까요. 내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야하는데 이 방법을 배워보도록 합시다.    1. 같은 클래스명이나 스타일을 하단에 작성 하나의 CSS 파일일 경우, 설명하다 .box { background : red;}.box { background : blue;}같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용합니다.     CSS파일이 여러개 첨부되어있을 때도 유효합니다.를 하단에 사용할 수록 하단에 작성한 것과 똑같은 효과이기 때문에main.css와 main2.css에 같은 class 명이 있더라도main2.css에 있는 클래스 명을 우선적..

실은 버튼복붙보다는 col, row 이런게 매우 간편해서 Bootstrap을 사용합니다.큰 회사에서 뭐 만들 때도 페이지가 많다면Bootstrap을 안써도 직접 col, row 같은걸 만들어서 사용하는 경우가 많습니다.그래서 Bootstrap 쓰든 안쓰든 col, row 같은 class 사용법은 잘 익혀두는게 중요합니다.       숙제1 : 위 사진처럼 보이는 반응형 레이아웃을 만들어보세요(조건) PC사이즈에서는 사진처럼 4열, 태블릿 사이즈에서는 2열, 모바일에서는 1열로 정렬되게 만들어야합니다. 저는 어떻게 했냐면 각각 다른 사이즈(md,lg,sm) 에서 차지할 column 갯수를 따로따로 설정할 수 있습니다.  설명하다  안녕 안녕 안녕 안녕 간단하게 클래스 두개를 이어붙이면 ..

Boostrap은 프론트엔드 Component Library라고 하여웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS 파일입니다.이걸 우리 HTML 파일에 설치하시면 보다  빠른 복붙식 HTML CSS개발이 가능합니다.    ▲ 버전 선택은 상단 Docs 메뉴 선택 뒤에 우측 위 버튼 누르시면 됩니다.5.X 버전으로 맞추고 합시다.  Bootstrap 3, 4버전도 사용가능한데 각각 세부 디자인이 다릅니다.디자인은 다르지만 다들 사용법은 동일해서 5버전으로 합시다.  IE 호환성은3버전은 IE9+4버전은 IE11+5버전은 IE12+ (Edge 브라우저)에서 이용가능합니다.      간단 설치방법  https://getbootstrap.com/docs/5.1/get..

1. 위와 같은 반응형 랜딩페이지를 만들어오십시오 (필요한 이미지는 첨부파일에 있습니다.)    2. 휴대폰 사진은 모바일로 축소시 사진처럼 글자 밑에 위치해야합니다. 3. 휴대폰 사진 뒤의 파란 배경은 색상 gradient가 적용되었습니다.위는 파란색, 밑은 보라색 색상을 단계적으로 적용했는데 어떻게 해야할까요?당연히 안배운건 구글 찾아봐야합니다.   3. 나머지 다른 영역의 모바일 레이아웃은 알아서 자의적으로 만들어옵시다.4. 아이콘은 Font Awesome 등을 활용합시다.5. 버튼에 마우스를 올렸을 때 색상이 바뀐다든지 하는 간단한 디자인을 입혀봅시다.      5. 이 사진엔 간단한 애니메이션을 넣어봅니다. 마우스를 올릴시 하얀색 테두리가 슬그머니 생겨야합니다.포인트는 애니메이션 동작시 이미지 ..

opacity 속성 .box { opacity : 0}현재 HTML 요소의 투명도를 조절할 수 있습니다.0부터 1까지의 실수를 입력할 수 있습니다.0.5 이러면 반투명해짐       transition 속성 설명하다 .box { opacity : 0; transition : all 1s;}transition을 부여하면여기에 적용된 CSS가 변할 때 서서히 변경해줍니다. all은 모든 스타일이 변할 때 서서히 변경하라는 뜻이고 (all 대신 opacity 이렇게 하나만 줄 수도 있음)1s 이건 1초에 걸쳐서 서서히 변경해달라는 뜻입니다.   transition 세부 속성 살펴보기  설명하다 .box { transition-delay: 1s; /* 시작 전 딜레이 */ transition-durat..

Font Awesome 다운받아 첨부하기  Font Awesome 홈페이지의 다운로드 메뉴에서 다운받아 압축을 풀면 여러개의 폴더가 나오는데, 이 중에 CSS, Webfonts 두개의 폴더를 여러분 작업폴더에 복붙하시면 됩니다. 그 후에 CSS 폴더 내의 all.css 라는 파일을 하나만 head 태그 안에 딱 첨부해주시면 설치 끝입니다. 나머지 잔챙이 CSS 파일은 다 삭제하셔도 됩니다.  link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">    Font Awesome CDN으로 첨부하기  CSS파일을 호스팅해주는 고마운 사이트들이 있습니다.이 사이트가 제공하는 all...

크롬 개발자 도구를 열면 버그 수정이 편해집니다.    브라우저에서 우클릭 - 검사를 누르시면 이렇게 HTML과 CSS를 한눈에 볼 수 있습니다. 혹은 F12 눌러서 개발자도구를 미리 열고 (맥은 alt + command + i)  ▲ 이렇게 생긴 버튼을 누르고 검사를 원하는 요소를 선택하면 됩니다.선택하면 우측 하단에 지금 선택한 요소에 적용된 모든 스타일을 보여줍니다.그 중에 어떤 속성을 만져야 수정이되는지 직접 조작해보며 확인가능합니다.   1. 여러 개의 중복 스타일이 있을 경우 가장 우선 적용되는것만 보여주고나머지 적용안되는 것들은 취소선 처리해줍니다. 2. html에 적용되는 여러개의 class가 있으면 전부 보여주는데 가장 위에 있을 수록 class의 우선순위가 높습니다. 3. 저기서 직접 ..

.box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */} 예전엔 rem 단위를 가끔 썼습니다.모든 div의 사이즈, margin, padding, 버튼 사이즈 이런게기본 폰트사이즈에 비례해서 움직이게 만들고 싶을 때 rem을 사용했습니다.브라우저 폰트사이즈를 키운 채로 웹브라우징 하는 사람이 있어서 그랬습니다.하지만 요즘은 ctrl + 마우스휠업 이렇게 줌인을 해서..

설명하다  저쩌구HTML 문서의 기본 템플릿은 꼭 head와 body 태그를 포함해야합니다.head태그는 사이트 내에서 눈에는 보이지 않는 중요한 정보들이 들어갈 수 있는데head태그 내에서 쓸 수 있는 중요한 태그들을 몇개 나열해보겠습니다.    1. 각종 CSS 파일들  CSS 파일들을 첨부할 때 링크태그를 집어넣을 수 있습니다.위 경로는 현 HTML 파일과 같은 위치에 있는 css폴더 안에 있는 main.css 파일을 첨부하라고 되어있네요.1. css/main.css2. /css/main.css참고로 위 두개의 경로는 다른 경로입니다.1번은 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미하고2번은 현재 사이트의 메인경로 (codingapple.com)부터 시..

Flexbox 레이아웃 사용법설명하다  설명하다 .flex-container { display : flex;}.box { width : 100px; height : 100px; background : grey; margin : 5px;}그냥 박스들을 감싸는 부모 요소에게 display : flex를 사용하면 됩니다. 그럼 박스들이 기본적으로 가로정렬로 배치됩니다. (참고) 인터넷 익스플로러 11 이상에서 사용가능한 속성입니다.11미만에선 flex 그런거 없다고 에러납니다.     Flexbox 세부속성 사용하기 설명하다 .flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : cente..