html

[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로 화면을 구분할 때 수직분하로가 수평분할을 적절하게 적용하여 흐름에 따라 작업을 합니다. 수직 분할 : 화면을 수직으로 구분하여 가로로 배치 수평 분할 : 화면을 수평으로 구분하여 세로로 배치 레이아웃 리셋 브라우저의 환경에 따라 여백 글꼴과 같은..

[HTML] Html심화

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 웹 페이지 구조잡기 Html이 마크업언어라 한다. 그렇다면 마크업 언어란 무엇일까? 마크업 언어란 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어이다. Html로 웹페이지 구조를 잡기 전에, 화면어 어떻게 보여줄지 먼저 생각을 해야한다. 큰틀에서 영역 나누기 각 영역을 태그로 표현하기 실습 - 유튜브 댓글창 구조잡기 유튜브 댓글창이다. 이와 비슷한 구조의 댓글창을 만글어 보려고 한다. 1. 큰틀에서 영역 나누기 댓글 입력 영역과 댓글창영역으로 나눠진다 댓글 입력 영역에서는 사용자 사진 영역, 댓글 추가 영역, 댓글 추가 버튼 영역이 있다 댓글창 영역은 사용자 사진 영역, 사용자 이름 영역, ..

[HTML] Html기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다. 틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 프론트엔드를 시작하면 가장 먼저 만나는 언어가 있습니다. Html Css Javascript 각각의 역할을 살펴 보겠습니다. Html : 구조를 만드는 마크업 언어입니다. Css : 스타일을 담당하는 언어입니다. Javascript : 사용자와 개발자간 상호작용하며, 각 요소에 명령을 부여합니다 Html 기본구조와 문법 html은 Tag들의 집합입니다. 여기서 말하는 tag는 부등호로 묶인 html의 기본 구성 요소입니다. 태그는 보통 두가지 꼴로 사용합니다. 태그에 특정한 속성을 부여하고 싶은 경우 or 이렇게 사용할 수 있습니다. 자주 사용하는 html요소 div : 한줄을 차지하는 태그이다. s..