css

[HTML/CSS] 브라우저

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다 브라우저 브라우저는 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨턴츠를 열람할 수 있게 해주는 GUI기반의 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신합니다 웹 웹은 World Wide Web이 풀 네임이며, 인터넷 상에서 텍스트나, 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼 텍스트 방식으로 연결해 제공합니다. HTML 언어를 사용하여 작성된 문서 형태로 제공되며, 이러한 문서들은 웹 페이지 라고 합니다. 웹 브라우저의 종류 최초의 그래픽 웹 브라우저는 1993년 미국의 일리노이 대학을..

[HTML/CSS] 계산기 만들기 (기능구현X)

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 계산기 원본 HTML cal.html CASIO KW-98 I`M READY 123456789 TAX- TAX+ M/EX % √ ▶ MC MR M- M+ +/- 7 8 9 C 4 5 6 AC 1 2 3 0 00 . = GT ÷ × - + CSS cal.css * { margin: 0; padding: 0; box-sizing: border-box; } body{ background-repeat: no-repeat; background-size: auto; background-image: url("https://search.pstatic.net/sunny/?src=https%3A%2F%2Fae01.al..

[HTML/CSS] Flexbox

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. Flexbox로 레이아웃 잡기 Flexbox로 레이아웃을 구성하는것은, 벅스르 유연하게 늘리거나 줄이면서 레이아웃을 잡는 것입니다. display:flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정합니다. box1 box2 box3 main { display : flex; border: 1px dotted red; } div { border: 1px solid green; } * { margin: 10px; padding: 10px; } 다음과 같은 코드가 있다. display:flex는 아직 잘 모르니 넘어가고, 나머지 코드만 보면 main태그 안에 빨간 점선이 생기고, main안..

[HTML/CSS] 레이아웃

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 와이어프레임 와이어로 설계된 모양 단순하게 레이아웃과 제품 구조를 보여주는 용도, 화면전화와 같은 스타일요소나 UX를 판단하는 것이 아님 목업 웹과 앱에서 실제 제품과 같은 작동을 하는 HTML문서를 작성하는 것 와이어 프레임과 목업은 건물의 설계도와 같은 역할이니 중요하다 HTML 구성하기 콘텐츠의 흐름에 따라 위에서 아래로, 좌에서 우로 흐른다. css로 화면을 구분할 때 수직분하로가 수평분할을 적절하게 적용하여 흐름에 따라 작업을 합니다. 수직 분할 : 화면을 수직으로 구분하여 가로로 배치 수평 분할 : 화면을 수평으로 구분하여 세로로 배치 레이아웃 리셋 브라우저의 환경에 따라 여백 글꼴과 같은..

[CSS] CSS Selector

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 기본 셀렉터 전체 셀렉터 * { } 태그 셀렉터 h1 { } p { } section, h1 { } ID 셀렉터 #ID { } class 셀렉터 .class { } attribute 셀렉터 a[href] { } p[id="ID"] { } 자식 /후손 /형제 셀렉터 자식 셀렉터 header > p { } header태그 바로 아래 p태그 자시만 선택이 됩니다. 후손 셀렉터 header p { } header태그 아래 자식 p태그뿐만 아니라 자식의 자식의 p태그까지 선택이 됩니다. 형제 셀렉터 section ~ p { } 같은 부모요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를..

[CSS] 박스모델

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. block, inline, inline-block 앞에 에 글을 작성할 경우 자음 태그에서는 자동으로 줄 바꿈이 되는것을 볼수 있었습니다. h1,h2,h3...와 같은 제목태그와 p태그의 경우에도 태그가 닫히고 난 이후 줄바꿈이 되었습니다. 각각의 범위를 보겠습니다. 이디야 커피 생각보다 비싸다 크림샷라떼가 4300원이다 하지만 맛있다 텀블러 할인을 받으면 200원이 할인이 된다 h1 { background: gray; } p { background: skyblue; } div { background: yellowgreen; } 모든 태그가 글이 끝나도 끝까지 범위를 차지하고, 다음이 시작되면 줄이 ..

[CSS] CSS기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. CSS기초 CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어입니다. 웹 디자이너가 존재하지만, 개발자도 CSS를 사용하여 화면의 구성이나 배치, 타이포그래피 등을 다뤄 대략적인 디자인은 할줄 알아야 소통이 가능하고 일이 수월해진다. UI interface - 컴퓨터가 교류하기 위한 연결고리 컴퓨터에 깊게 알지 못하는 사용자가 블로그 글을 포스팅하는데, 아무런 공부도 없이 html로 작성을 한다고 하면 작성을 포기할 것이다. 티스토리나 네이버 블로그를 보면 폰트, 색상, 이미지삽입 등등여러기능을 사용자가 알기 쉽게 위치해있고, 임시저장, 완료와 같은 버튼으로 누가봐도 용도를 알수 있게..