IT 끄적끄적

이미지를 넣을 때 div박스를 만들어 안에 넣는 것이 좋다. 이미지를 감싸는 박스로 고정되어 있으면 이미지의 크기가 조금만 바뀌어도 이미지가 손상될 일이 없다. 박스 안에 이미지를 넣는 방법은 다양하다. 우선 div태그 안에 이미지 태그를 사용해서 넣어볼 것이다. 자세히 보면 img_box 박스를 넘어서 이미지가 들어간 것을 볼 수 있다. 여기서 여러 가지 속성을 써보자. overflow:hidden; 박스를 넘어가는 사진을 잘라버리는 css 속성이다. (overflow:visible; 디폴트) 이미지 전체 화면을 넣기 위해 이미지에 클래스를 만들어줘서 width: 100% height : 100% 해주면 박스 크기에 맞게 이미지 크기가 변한다. 하지만 이미지의 비율이 깨지고 손상되기 때문에 좋은 방법은..

기본적으로 제공되는 html 자동완성 코드들 이외에 수정할 필요 없이 본인에게 필요한 자동완성을 만들면 훨씬 편할 것이다. File -> Preferences -> User Sinppets를 클릭해준다. 사용하는 언어를 선택해준다. html의 시작 자동완성 코드를 수정할 것이기 때문에 html을 검색해 클릭해준다. 사용자 코드 조각을 추가하기 위한 방법이 주석으로 친절하게 설명되어 있다. 시키는 대로 중괄호 안에 입력을 해줄 것이다. "My html form" : { "prefix": "m_html", "body": [ "", "", "", "", "$2", "", "" ], "description": "html 자동완성 추가" } prefix는 코드를 불러올 명령어를 지정하는 것이고 불러오는 코드의 내..

3가지 버튼을 디자인해볼 것이다. * 최종 완성본 * 우선 button타입 input 태그를 3개 만들어준다. 내가 원하는 위치, 크기를 디자인하기 위해서는 원래 태그들이 가지고 있는 속성들을 모두 초기화해주는 것이 좋다. html의 모든 css 속성을 초기화하기 위해 style태그에 * { padding : 0px; margin : 0px; } 을 지정해놓자. 모든 패딩과 마진이 사라지고 따닥따닥 붙어있는 것을 볼 수 있다. 검색이라고 적힌 버튼에 우클릭하여 검사를 눌러보면 패딩과 마진이 모두 빠지고 border가 4면에 2씩 남아있는 것을 볼 수 있다. button이 가지고 있는 고유한 속성인데 만약 저 버튼의 높이를 50px로 주면 자동으로 border의 두께 4를 빼고 버튼의 순수 높이가 46px..

태그 input 태그는 사용자의 상호작용(이벤트)을 받을 수 있는 태그이다. 사용자의 입력을 받아 서버에 전송할 때 사용한다. input 태그는 종류가 매우 많다. 이 종류는 type으로 지정해준다. 이 많은 종류들을 모두 알고 있을 필요는 없다. 지금 몇 가지 타입을 살펴본 후 필요할 때마다 https://developer.mozilla.org/ko/ 이 사이트에서 검색한 후 찾아보는 것이 좋다. MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozi..

사진 이름 코스 성별 남 전화번호 1 이메일 ssar@nate.com 학력 고등학교 하이스쿨 대학교 1 자기소개 1

git을 사용하는 버전 관리에 대해 나중에 다시 자세히 배울 시간이 있으니 간단하게만 알아두자. git은 버전 관리 시스템이다. 버전 관리 시스템이 무엇일까? 하나의 파일을 두 명 이상의 사람이 같이 작업할 때 작업하는 방법을 생각해보자. 첫째. 동시에 작업하지 않는다. 1번의 작업이 모두 끝난 후 2번이 작업한다. 이런 방식은 진행속도가 느리다는 단점이 있다. 둘째. 예를들어 같은 hwp 파일을 위아래 두 개로 분할하여 위쪽을 1번이, 아래쪽을 2번이 동시에 진행한다. 이후 작업이 끝나면 아래쪽을 복사하여 1번 파일에 복사 붙여 넣기 한다. 이 방법은 사람이 합쳐야 하는데 파일이 2개일 땐 좀 귀찮더라도 가능하지만 진행하는 사람이 100명 이상이라면 사람이 합치는 게 쉽지 않다. 이것을 협업이 지옥 같..

index.html 로고사진 호스트가 되어보세요 도움말 회원가입 로그인 에어비앤비 둘러보기 사진 숙소 및 부티크 호텔 사진 트립 사진 어드벤처 사진 레스토랑 사막 사진 추천 여행지 파리 1박 평균 131,641 도쿄 1박 평균 103,762 런던 1박 평균 149,512 로스엔젤레스 1박 평균 159,646 바르셀로나 1박 평균 127,166 에어비앤비 플러스를 만나보세요! 퀄리티와 인테리어 디자인이 검증된 숙소 컬렉션 호텔 사진 전 세계 숙소 사진 오두막 * BALIAN BEACH, BALI BALIAN TREEHOUSE w beautiful pool ★★★★★ 185 슈퍼호스트 사진 키클라데스 주택 * 이아(OIA) Unique Architecture Cave House ★★★★★ 188 슈퍼호스트 ..

display의 옵션 중에 block, inline, inline-block을 배웠었다. 이제 flexbox를 배워볼 건데 이걸 활용을 하게 된다면 아주 레이아웃 배치가 쉬워질 것이다. 사용법 display : flex; 부모 자식 태그 모두 block 상태라 자식 태그가 부모 태그 범위를 가린 모습이다. block이던 박스 2개가 inline-block이 된 것을 볼 수 있다. * flex 쓰지 않고 쪼개는 방법 : 따로 올라간 '실습'글 참고! 그냥 이렇게 힘들고 지저분하게 쓰지 말고 깔끔하게 flex 쓰자! flex를 적용시키는 방법은 내가 제어하고 싶은 대상의 부모한테 코드를 적어야 한다. 부모 태그가 자식을 감싸야 자식에게 적용된다는 것이다. 이때 자식이 flex가 적용되어 inline-bloc..

CSS(Cascading Style Sheets) : HTML을 디자인해주는 스타일 언어 지금의 HTML은 문서를 구조화하는 언어이고 세세한 것들 하나하나 조금 더 예쁘게 해주는 언어가 CSS이다. CSS가 무엇인지 알아보자. head 태그 안에 title이라고 영어를 치고 엔터만 눌러도 이 자동 완성될 것이다. 이것을 code assistance라고 한다. code assistance : 코드 자동완성 브라우저의 제목은 head에 기입한다. HTML 문법은 이게 끝이다. CSS 문법은 조금 다르다. 1. head에 적어야 함 2. 태그 사이에 적어야 함 3. 태그이름 { 중괄호 안에 기술하면 됨 } .클래스명{ } : 태그 이름이 아닌 클래스 이름을 따라갈 때 .클래스명 div{ } : 클래스 아래 자..