221015~221016 클론코딩 - 학원 홈페이지 만들기

처음부터 끝까지 기존에 작성한 코드를 복사 붙여넣기 하지않고, 학원 홈페이지를 만들어 봤다. 아직 큰 효과를 주는 방법을 배우지 않아서 화려하게 움직이고 이런 동작은 없지만, 레이아웃을 짜는 방법이나, 이미지를 넣는 방법, 배치하는 방법, 등 배운 것을 기반으로 한 기본적인 사이트를 만들어 볼 수 있었다. 내가 주말동안 만들어보면서 '어떻게 하면 이 코드들을 더 짧고 간결하게 쓸 수 있을까?' 를 고민을 많이 하게 됐다. CSS에서 선택자를 이용해서 내가 원하는 블록의 경로를 가는 것 조차 너무 작성 내용이 길어져서 조금 간결하게 쓰고 싶다는 생각이 들었다. 코드 더보기 HTML 학교소개 교육과정 취업정보 커뮤니티 상담신청 Game Architecture 게임 기획 게임기획자를 위한 정석 class 바로..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 17.
• textsms

CSS - 속성과 속성값

클론코딩 - CSS 속성 1. min-height / max-height 2. clear: both; 3. border-radius 4. background : url 5. border 1. min-height , max-height 블럭의 최소, 최대 높이를 설정하는데 사용하는 속성 width 도 마찬가지로 사용할 수 있다. 2. clear: both; float를 사용한 후 블럭이 좌,우측에 있을 때 좌측을 채우는 과정에서 우측의 블럭의 양이 적을 경우 밑에 오는 블럭이 우측 블럭 밑으로 채워지는 현상이 있었다. ( 빈 공간에 채워짐..) 나누어 놓은 블럭에 관계없이 기본 상태로 돌아갈 수 있는 속성 속성값으로는 both, right, left 가 있지만, 내가 원하는 레이아웃을 이미 만들어 놨기 때..

• format_list_bulleted HTML & CSS
• · 2022. 10. 17.
• textsms

221014 HTML,CSS 클론코딩

학원 홈페이지 클론 코딩 오늘 내가 배운 것 클론코딩 : 실제 구현되어 있는 서비스를 직접 내 손으로 구현하는 것 (당연한 것이지만 절대 코드 그대로 긁어오지 말 것!! 어차피 해야 공부된다...) 1. 페이지를 만들 때 큰 틀을 먼저 생각한다. (레이아웃) 위에서 아래로, 그다음엔 위 레이아웃부터 좌에서 우로 채워 나가야 편하다. 2. 속성 min-height / max height : 최소 높이/최대 높이 설정할 때 사용 3. 속성 clear : both; float 를 사용한 후 블록이 좌우측에 있을 때 좌측을 먼저 채우는 과정에서 우측에 블럭의 양이 적을 경우 다음 블럭이 우측 블럭 밑으로 채워지는 현상이 있었다. (빈 공간에 블럭이 채워짐) 이를 방지하기 위해 clear : both; 를 사용하..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 14.
• textsms

CSS - position (블럭 위치조절 3가지 방법)

CSS 블럭 위치 조절 3가지 방법 display : inline-block 속성 float 속성 position **포지션을 쓰면 z-index를 다 써주는 것이 좋다. display : inline-block 속성 display 의 속성 값으론 inline , inline-block, block 이 있다. inline 형태의 특징으로 margin 과 width 의 속성을 이용할 수 없다. 그래서 위치 변경의 어려움이 있는데 그것을 display : inline-block ; 사용하여 inlin-block 형태를 취하게 되면 inline의 특징을 가지면서 block 형태를 가지기 때문에 width, height, padding, margin을 모두 사용할 수 있게 되므로 위치 조절을 하는데 용이하다. ..

• format_list_bulleted HTML & CSS
• · 2022. 10. 13.
• textsms

221013 CSS

2일 차 복습, 속성 position 과 속성 값, 주석 오늘 내가 배운 것 주석 (언어마다 주석을 쓰는 방법이 다름) 코드가 실행되지 않는다. 메모처럼 해당 코드가 어디를 구현하는 건지 적어 둘 수 있다. HTML : CSS : /* */ (html, css) 많은 부분에선 영역선택 후 cmd / ( 윈도우 : ctrl / ) css를 적용하는 3가지 방법 인라인스타일 style 외부 파일 외부 파일을 사용할 때 link의 속성 3개 href, type, rel type과 rel 은 외우는 부분 (type="text/css" rel="stylesheet") 작업을 할 때 css 외부파일 연결까지 확인 후 시작하자. padding 을 margin보다 많이 쓰는 것이 효율적이다. (margin을 쓰기 위해..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2022. 10. 13.
• textsms

CSS 기초

CSS CSS : Cascading Style Sheets 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트 CSS 선택자 선택자 예시 설명 # #header{} id . .header{} class (element) body{} 엘리먼트 전체 * *{} 전체 > ul > li {} ul 안에 있는 li , ul, li {} ul 과 li CSS 속성 속성 속성값 설명 display none, block, inline, inline-block ... 블럭형태, 인라인형태를 설정 margin a, b, c, d; 블록 바깥 여백(간격 띄울 때) padding a, b, c, d ; 블록 내부 여백(간격 띄울 때) float right, left 블럭이 기본 틀에서 빠져서 텍스트나 인라인 요소가 그 주..

• format_list_bulleted HTML & CSS
• · 2022. 10. 12.
• textsms