양씨

margin collapse란? "마진이 겹쳤다"라고 말하는 현상이다 즉, 박스의 테두리들이 완전히 겹쳐 있으면 다음과 같은 상황이 나타난다 마진을 하나로 합쳐주고 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 된다 이건 어떻게 해결할까? 안겹치게 하면 된다 그냥 간단히 부모 박스 상단에 padding:1px와 같이 패딩값을 주자

div로 레이아웃을 짜며 왼쪽 정렬을 하고 싶을 때 float:left를 이용하여도 되지만 display : inline-block을 이용하여도 된다 인라인블록 인라인블록 : 내 폭과 높이만큼 자리 차지하게 해줘 기존 inline 요소와 마찬가지로 나란히 배치되지만 block 요소 처럼 width와 height 등 속성 지정이 가능하다 즉, block 요소를 따르면서 외부적으로는 inline요소가 되는 하이브리드 타입이다 그래서 레이아웃을 만들 때 사용되는 경우가 있긴하다 .left-box { width : 100px; height : 100px; display : inline-block; } .right-box { width : 100px; height : 100px; display : inline-b..

div를 이용하여 레이아웃을 만들때, 왼쪽으로 정렬하고 싶은 경우가 있다 이때 float 속성을 사용하면 된다 Float 요소를 공중에 띄워 왼쪽/오른쪽으로 정렬하는 속성이다 .left-box { width : 100px; height : 100px; float : left; } .right-box { width : 100px; height : 100px; float : left; } 하지만 float는 말 그래도 요소들을 띄우기 때문에 다음 html 요소들이 제 자리를 찾지 못한다는 단점이 있다 + float박스로 가로정렬할 때는 div로 감싸고 폭을 지정해줘야 모바일에서 안흘러넘친다 그래서 float를 사용한 뒤 clear 속성을 사용해서 다음에 오는 박스들이 제자리를 찾게 된다 + float : n..

div란? div태그는 division의 약자로 웹사이트의 레잉아웃을 만들때 주로 사용한다 div를 사용하면 각각의 블록을 알맞게 배치하고 css활용하여 스타일을 적용할 수 있다 일반적으로 div에 많이 사용하는 css속성에는 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } 이런 스타일들 말고 굉장히 광범위하게 많은 스타일과 태그 등이 있는데 뭐,,많이 쓰는 것들은 외우겠지만 외워봤자ㅏ 맨~날 까먹는다 그렇기에 필요할때마다 구글에서 찾아쓰는게 좋다 그리고 div박스는 display :block이 기본적으로 내장되어 있다 div말고도 p, h1, li등이 block속성이 내장되어 있어 태그를 사용하면..

css selector란? 말 그대로 선택을 해주는 요소이다 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다 selector 종류는 크게 4가지이다 전체, 태그, 클래스, 아이디 .profile { font-size : 20px } //클래스 #special { font-size : 30px } //아이디 p { font-size : 16px } //태그 * { font-size : 20px } //전체 위와 같이 css파일에 적용 가능하고 해당 요소에만 스타일이 적용가능하다 굳이 하나만 선택하지 않고 복합적으로 선택도 가능하다 //하위 선택자 section ul { font-size:20px; } //자식 선택자 section>ul { font-size:20px; } 하위 선택자 : 부..

css란? cascading style sheets 약자로 html 등의 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어 글자 텍스트 등 인라인 요소 중앙 정렬 text-align: center 이용 p { text-align: center; } 블록 요소 중앙 정렬 1) margin: 0 auto 이용 div { margin: 0 auto; } auto는 자동적으로 사이즈를 적용하는 것이기 때문에 가로의 넓이가 있어야한다(지정되있지 않다면) 인라인 속성이 아닐때는 display: block 2) flexbox 이용 부모요소에 다음과 같이 flex 설정을 해준다 .container{ display: flex; justify-content: center; }

자 html 복습 시~작! html은 웹페이지를 만들고 디자인하고 싶을 때 사용하는 언어이다 언어라고하기엔 애매하고,,마크업언어인 마크다운이라고 말하는게 나을 듯 싶다 hypertext markup language의 약자인데 이름에서 나왔다싶이 markup language에 주목하면된다 한마디로 "자료의 구조를 표현하기 위한 언어"이다 html 문서는 .htm로 저장하면되고 위에 코드 형식이 있어야 컴퓨터가 아~이게 html 파일이구나라고 인식함! head-> 인코등형식, 사이트제목, 필요한 css나 js 파일등이 들어갈 수 있고 body -> 실제 웹사이트에서 보여줄 글, 그림 등을 넣으면 된다! html은 로 작성한다 나는 바보야 라는 식으로 태그들을 열고 닫은 후 내부에 글을 넣고 그림을 넣는다 h..

태어나서 한번도 윈도우를 벗어나본적이 없는 내가 드디어..! 애플로 건너오게 되었다 개발환경 말고도 익숙해지는데 굉장히 많은 시간이 걸릴듯..하다 아직 너무 익숙하지가 않다 대학교 입학 후 20살이 되자 마자 산 노트북을 애지중지하며 노트북으로 게임도 안했는데 역시 기기는 수명이 다하면 안되나보다🥹 아무튼 맥은 윈도우 환경과 다른 점이 많다 보니 점점 익숙해지길..!! 맥을 처음 사고 익숙해지려 이것저것 만져보며 구글링으로 맥에 관련된걸 검색을 많이 해봤는데 홈브류란 단어가 굉장히 많았다 그래서 찾아보니 대충 홈브류(homebrew) 간단히 말해 홈브류는 맥 os용 패키지 관리자 이다! 홈브류 말고 맥 os용 패키지 관리툴이 있지만 현재는 홈브류가 거의 표준으로 인식하고 있다. 크게 생각해 홈브류는 큰 ..

웹 사이트의 콘텐츠를 서비스하는 서버부터 모든 스마트폰 노트북 등 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하는데 이를 IP 주소라고함. IP주소를 사용하여 통신하는것은 너무 불편 -> 따라서 도메인을 사용하여 통신함 웹사이트의 데이터가 저장되어 있는 호스팅 서버는 인터넷 회신이 연결된 컴퓨터 IP장치가 할당되어 있고 이 주소가 실제 웹사이트 주소, DNS 서버는 이런 IP 주소를 특정 도메인 주소와 같다는 기록을 저장해두고, 인터넷 사용자들이 도메인 주소를 검색했을 때 IP 주소로 연결되도록 해준다   DNS 예시어떤 유저가 브라우저에 NAVER.COM 으로 검색먼저, DNS 서버로 도메인 주소 전달되어 NAVER.COM 에 맞는 IP주소를 찾아 브라우저에게 IP 주소 전송브라우저는 IP주소를 갖..

http( hyper text transfer protocol )는 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다  프로토콜? 규칙이라 생각하면 편하다이렇게 규칙을 정해두었기 때문에, 모든 프로그램은 규칙에 맞춰 개발하며 정보 교환이 가능해짐 http는 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따름http는 www 상에서 주로 html 문서를 주고 받으며 tcp와 udp를 사용한다.   http의 동작 방식클라이언트가 브라우저를 통해서 어떠한 서비스를 url를 통해 서버에 요청하면 서버에서는 해당 요청에 대한 결과를 응답하는 형태로 동작   http 프로토콜 특징 비연결성(connectionless)무상태(stateless) 비연결..