개발일지

1.box-modelbox-model이란?box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈.border을 기준으로 바깥쪽이 margin 안쪽이 paddingmargin-left: 100p

5.position홈페이지는 2차원과 3차원을 조합해서 이루어져있다. position은 3가지 경우의 수를 기억하면 된다. 1\. margin-top 사용시 부모 자식 지간에 발생하는 마진병합현상이 일어나는지... 2\. top,right,bottom,lef

적응형 레이아웃 : 브라우저의 크기를 줄이면 픽셀의 크기가 줄어들어서 자연스럽지 않고 뚝뚝 끊기면서 줄어들거나 커짐.반응형 레이아웃 : 자연스럽게 리사이징 됨.모바일용 웹,pc형 웹 레이아웃을 아예 따로따로 만들어놓는 경우 있음 ex.네이버미디어 쿼리 기초320px~

미디어쿼리 실습) 메뉴버튼 만들기미디어쿼리 실습) 덴마크 쇼핑몰 특정 영역 만들기header,main 모두 block요소이기 때문에, y축정렬을 함.미디어쿼리 실습) 에이전시 특정 영역 만들기각 단계별로 레이아웃이 변경되는 실습. 3가지로 레이아웃이 나타남

\-공간에 대한 크기를 이미지의 크기와 똑같이 설정해줘야한다.현재 이 로고는 데코용이기 때문에 background-image로 설정했다.background-image는 기본적으로 반복하는 성질을 가지고 있다. 웹사이트 제작시에 이미지의 사이즈는 보통 짝수이거나 5로 나

forest1기억해둬야할 것! 네모난 박스 그림자를 기준으로 forest2 영역을 침범하고 있다. 이걸 기억해두기!현재 lefttree의 이미지중 저 박스가 크기가 커서 배경인 forest1_bg의 바깥쪽으로 튀어나오고 있는 모습이다. top,left,right,bot

night2@keyframes moveMoon { from { margin-left: -135px; -> 원래 달의 크기에 –를 붙여서 화면 왼쪽으로 당겨놨음. to { margin-left: 110%; -> 화면 밖으로 빠져나가야해

8회차 수업필기 – helbak 사이트 만들기{margin: 0; padding: 0;모든 태그에 대해서 적용한다는 뜻/ 태그가 너무 많은데 그것들을 다 일일이 써서 하면 너무 길어지니까.h1, h2, h3, h4, h5, h6, p { font-weight:

header 안을 2가지 영역으로 나눔. 같은 가로의 길이 1130px로 되있음. 코드를 작성할 때 통일성있게 작성하는 것이 중요함. 예를 들어, {배치-공간-폰트}이런식으로 나중에 유지보수할 때 관리가 편하기 위해서.button은 태생적으로 border값을 가지고 있

a 태그는 inline요소이기 때문에 block으로 바꿔줘야한다. padding: 상하 좌우 이런식으로 기입.padding: 0 8px; < 상하에 0px의 패딩값, 좌우에 각각 8px의 패딩값을 적용한다. 이 아래 배너가 오는데 배너의 공백이 12px이라서 이

컨텐츠가 중앙정렬되있는 모습margin: 0 auto; < 중앙정렬 태그.글자의 공백에 대한 태그: padding 이용. 8px+8px= 16px 글자와 글자사이에는 16px이라는 공백이 생기므로 li태그 안쪽에 margin-right : 16px기입. pa

만들려는 영역을 살폈을 때 공통적으로 들어가는 영역을 확인해서, 공통적으로 들어가는 영역을 먼저 css태그를 만든다. 윗부분 높이는 다른 영역들도 전부 동일하게 62px;shop-title-border가 배경보다 위에 올라와있기 때문에 글자가 보이는 것. 폰트사이즈를

상단영역작업완료아이콘 넣을 때 I태그를 사용한다. 겨우겨우 작업완료!없었음!^\_\_\_^코드가 엄청 길어지니까 약간 무서움.... ㅠ\_ㅠ복잡하다 복잡해.. ㅠㅠ 겨우겨우 했음...ㅠㅠ

html태그에서 이미지의 크기를 설정해놓고, css태그에서 100%로 설정하면 그 크기에 맞춰 크기가 설정된다. 현재 202px로 설정되어있어서 이미지의 크기가 202px로 설정되있음.설계도 짜기.flex를 위쪽과 동일한 코드를 사용한 이유는 2개든 1개든 배치결과가

}flex에서 x축정렬코드 찾으면 이렇게 뜸. display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}nav left,right 서로 반대되게 코드작성함.오늘은 없었음!오늘 배운거

border값도 정할수가 있다. border-width: 상 좌우 하 순서로 기입한다.태그쓰는 법외우기!div태그 안에 a태그로 감싼다. 그 안에 p태그와 i태그 옴.블로그 마켓 가입은 글자를 강조하기 위해 span태그. : i태그는 아이콘태그!flex 를 사용해 배치

네이버 페이지 작업하면서 많이 사용했던 flex. 양쪽으로 배치되는 것. 반복적으로 사용하고, 이번 뉴스페이지에서도 사용하니까 news.html 코드내에 이 flex를 class화 시키도록함. css 코드에 먼저 코드를 써놓고 후에 html class 코드에 코드명을

오른쪽과 같이 왼쪽도 패딩값을 똑같이 맞춰준다. 밑에는 패딩값 상관없음!아이콘 완성!끝!중간에 flex-between 적용했는데 안되서 애먹었음..그부분 다시한번 수업들어보고 다시 태그 입력하기. 반복 또 반복할것.ㅠ\_ㅠ어려워어려워.... 코드가 길어지면서 어렵고 특

container의 역할은 컨텐츠들을 가운데 몰리게함. ent.html의 header은 가운데로 몰리지 않고 왼쪽 중앙 오른쪽 고르게 배치되있어서 container 쓰지않음.header center 작업중. padding: 상 좌우 아래; border-bottom을 원

section4 완성section5 완성a태그 안쪽에 또 a태그를 넣을수 없음.이미지위에 플레이버튼을 올리기위해서는 3차원으로 바꿔줘야하니까 이미지와 아이콘플레이는 absolute이고, 그것들을 감싸는 img wrap은 position relative로 감싼다.sect

항상 -wrap부분에 margin을 작성. margin은 외부에 있는 공백을 처리하기 위함이어서 wrap부분에 작성하는 듯.끝!없음~복습!오늘 강의 짧아서 좋았다.ㅎㅎㅎㅎㅎㅎㅎ 앞에꺼 복습하기!!!

z-index: 100; 100이라는 기준점을 만들어놓은 것. 다른 object들이 100을 기준으로 뒤로 또는 앞으로 올수 있다. 없었음복습하기! 강의 무한반복!html로 구도를 잡고 css로 디자인작업을 하는 이 루틴이 익숙해져서 어려운건 아직까지 없음!

배너에 overflow:hidden처리를 하지않으면 radius적용이 되지 않는다.이미지의 모습 그대로 나오는데, 배너에 overflow 히든처리함으로써, 실제 이미지는 각져있지만, radius적용된모습으로 화면에 나오게 됨.그러니까, overflow:hidden; 처

같은 css 코드를 적용하기 위해서 저런식으로 코드를 작성함. .image-text .text 이렇게 적용하지않음. ul태그에 있는 h3,span에도 같은 css코드를 적용하기 위함.position relative로 감쌌고, 자식들은 absolute라서 적용이되었음.똑

내용 글자가 들어가지 않으니까 div태그. 글자가 들어가면 span태그를 써준다. 부모부분에 relative 자식엔 absolute로 감싼다. ![](https://images.velog

line-height 글자간 간격이라, 중앙에 맞추는 역할을 함. 중간부분 네이버실습코드 참고해서 작업하는데 거기선 width값이 30px로 되있어서해봤는데 이상하게 출력되서, 40px으로 맞춤.hedader높이값 60+ border값 1 = 61.그러므로, main에

배치작업을 먼저 끝내고, 디자인작업 진행.부모가 relative. 자식은 absolute.그렇다면 자식의 위치를 잡을때, 부모인 article을 기준으로 잡음.하단 왼쪽으로 붙게하는 배치사용할때, 부모가 relative로 기준 잡아놔서 그것을 기준으로 left: 0;

오른쪽 하단에만 border radius 적용하고싶을때 이렇게 적용.span태그는 기본적으로 글자에 공백이 존재한다. 그래서 먼저 배치한후에, 디테일하게 작업할경우, 따로 코드를 작성해서 넣어서 배치를 완성시켜준다. 이런 코드 사용. position: relative;

팀장을 선출하고 기관에 연락을함. 나는 4팀의 팀장을 맡음. 앞으로 이 팀의 프로젝트를 총괄적으로 담당하게 됐음. 기관에는 메일로도 연락을 했고, 문자로도 연락을 드려 잘부탁드린다고 함. 어떤 홈페이지를 제작하고 싶은지 물었는데, 아직 답장은 오지 않은 상태임. 오늘