개발일지

사용자가 보는 모든 화면의 구성,기능,페이지를 개발. 앞단영역 사용자가 보지 못하는 프로그램영역 개발. 뒷단영역 제작한 웹사이트가 여러 종류의 브라우저에 동일하게 동작 및 구현. 웹 - 파이어폭스, 마이크로 엣지, 크롬, 오페라 등등 모바일 - 안드로이드,

어려웠던 점은 딱히 없었습니다!이론 위주의 수업이 아니라 실제 사이트들의 구조를 직접 잡아보며감을 익혀가서 좋았습니다.inline : 한줄로 출력, 공간에 대한 크기 설정X(CSS), margin&padding값 (상하배치) Xblock : 줄바꿈되어 y축으로 정렬,

선택자에 대하여 자세히 알 수 있는 시간이 되었다. id, class, 직접 선택자 등 html 작성시에 쓰여진다라는 것만 인지하고 있었는데, 이번 수업을 통하여 언제 사용하는건지, 선택자들 사이의 우선순위는 어떻게 되는지 알게되었다. 그리고 이미지를 적용할 때, h

학습소감 깃허브링크 :) 닷홈 개인홈페이지 링크 :) 닷홈 개인홈페이지는 2개월 전 다른 수업을 받을 때 만들어보았다. (파일질라를 사용하여 업로드) 이번 AI School 수업을 통하여 배운 내용들로 더욱 풍성하고 성장한 홈페이지를 만드는것이 목표이다! 가상

실습코드 깃허브 링크 :) : 웹사이트를 만들 때 레이아웃 구조를 빠르게 파악할 수 있도록 도와주는 일종의 옵션 :새롭게 생긴 공백에 의해 밀려남, 선택한 영역이 주체적으로 움직이는 것이 아니라 타의에 의해 옮겨짐 /padding값에 의해서 원래 설정했던 크기보다 달라

실습 코드 깃허브 링크 레이아웃 z-index >position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 요소들의 수직 위치를 z-index 속성으로 정한다. (z-index : z축에 영향을 미치는 속성) 값은 정수이며, 숫자가 클 수록 위로 올라오고

!codepenkim-min-jii/embed/RwVrJye?defaultTab=css%2Cresult&theme-id=dark✔️ li들은 float : left; 로 x축 정렬 / ul에는 overflow : hidden;을 입력.✔️ a태그와 list태그 고유의

실습코드 깃허브 링크 💻 !codepenkim-min-jii/embed/qBmZXqW?defaultTab=css%2Cresult&theme-id=dark✔️ 기본적인 메뉴 구조를 짜고 가상선택자 hover를 사용하여 마우스 오버했을 때의 효과를 설정해준다. (검은색의

실습코드 깃허브 링크 💻어제 배운 CSS 애니메이션을 바탕으로 텐바이텐 사이트를 클론코딩 해보았다.!codepenkim-min-jii/embed/LYyZPjW?defaultTab=css%2Cresult&theme-id=dark✔️ 제일 큰 이미지를 감싸고 있는 div

07.09 반응형 웹사이트 제작하기 - 미디어 쿼리 https://blog.teamtreehouse.com/which-page-layout 적응형 : px 단위로 뚝뚝 끊김 반응형 : 자연스러운 리사이징 *네이버처럼 웹버전과 모바일버전 레이아웃이 전혀 다른경우

실습 코드 깃허브 링크@media 쿼리 코드 - 실무에서 가장 많이 사용모바일 파일을 따로 작성한다. pc버전, 모바일버전스타일태그 사용 (html안에 직접적으로 코딩)ex body { background-color: red; }

실습 코드 깃허브 링크포지션을 어떤것을 써야하는 것에 대한 당위성 있어야함.위치를 조정하는 3차원적인 특징을 써야하기 때문에 relative(2,3차원)부모-relative,자식-absolute를 사용했다면 자식의 위치기준은 부모가 된다.1.margin-top은 마진병

실습 코드 깃허브 링크https://helbak.com/helbak 사이트를 참고하여 레이아웃 코딩 실습을 했다.이 실습에서는 모바일 버전을 먼저 만들고 모바일 레이아웃 기준으로 pc버전 미디어 쿼리를 추가하였다.!codepenkim-min-jii/embed/