본문 바로가기

HTML5 & CSS355

HTML 이란? ⚾️ HTTP 란? HyperText Transfer Protocol의 약자. 컴퓨터들끼리 HTML파일을 주고받을 수 있도록 하는 소통 방식 또는 약속이다. ⚾️ HTTP의 특징 Request / Response (요청/응답) HTTP의 통신의 핵심은 요청과 응답이다. 보내는 주체는 받는 주체에게 요청을 보내고, 받는 주체는 요청을 보낸 주체에게 응답을 보낸다. Stateless (State(상태) + less(없음)) 각각의 HTTP 통신(요청/응답)은 독립적이기 때문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못한다. 그러므로 매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 한다. 2021. 11. 20.

[HTML] html과 기본 tag 는 태그(tag)라고 부른다. 앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그를 '닫히는 태그'라고 한다. 📌진하게 강조하기 📌밑줄 치기 📌제목 📌줄 바꿈 📌단락 📌이미지 삽입 위에 width="100%"라는 것은 속성(Attribute)이라고 한다. 📌리스트 와 같은 항목들은 그 항목이 어디서부터 어디까지가 서로 연관된 항목인지를 경계를 짓기 위한, 그룹핑을 하기 위한 부모 태그가 필요하다. 즉, 태그는 반드시 부모 태그를 갖고 있다. 📌리스트에 번호 매기기 📌이 문서는 html이다. 📌전체를 감쌈. 2021. 11. 20.

Scss에 익숙한 분들을 위한 간단 styled-component 사용법 Scss, Sass를 사용할 땐 아래와 같이 사용했을 것이다! .mainText { display: flex; margin: 0px; padding: 0px; } import React from 'react'; import './App.scss'; class App extends React.Component { render() { return ( hello world ); } } export default App; 하지만 styled-component는 다음과 같이 사용한다. import React from 'react'; import styled from 'styled-components'; const MainText = styled.div` display: flex; margin: 0px; paddi.. 2021. 11. 14.

Sass 란? 🪀 Sass Syntactically Awesome Stylesheets의 약자. 스타일시트 언어. CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어. CSS의 전처리기, 즉 CSS를 만들기 위한 도구이다.CSS 👉🏻 Sass 컴파일러 👉🏻 SCSS 해석되어 CSS로 컴파일되는 스크립트 언어이다. 프로젝트가 점점 커지고 복잡해지면 스타일시트도 덩달아 커지고 관리할게 많아지며 복잡해진다. 이에 따라 유지보수도 힘들어진다. Sass는 CSS의 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 통해 유지보수를 높여주는 언어이자 도구이다. variable, nesting, mixin, inheritance 등의 개념이 추가된 것이 Sass이다. Sass 공식 구현체는 오픈 소.. 2021. 11. 9.

CSS-Module 이란? 🎨 CSS Module 이란? CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다. 장점 CSS Module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다. CSS Module은 컴포넌트 단위로 스타일을 적용할 때 유용하다. 본인은 리액트에서 CSS Module을 사용한 경험이 있다. Webpack의 css-louder로 번들링을 해서 사용을 했었다. 컴포넌트별로 관리할 때 사용하기 몹시 편리했고, 그동안 SCSS에선 동일한 스타일의 속성을 include나 mixin을 활용해서 중복을 최대한 줄여도 결국 클래스명은 따로 선언해줘야 되는 점이 아쉬웠다. 하지만 CSS Module은 스타일의 속성을 한 곳에서만 지정하면.. 2021. 10. 16.

[생활코딩-WEB1] 웹사이트 완성 [출처 : Youtube - 생활코딩] https://youtu.be/w5S0GACgL3U?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb 우리가 만든 웹페이지들을 엮어서 하나의 웹사이트로 만들어보자. index.html See the Pen eYvoRxL by 이윤경 (@yunkyung-creator) on CodePen. 1.html See the Pen xxqerBN by 이윤경 (@yunkyung-creator) on CodePen. 2.html See the Pen dyvLzoY by 이윤경 (@yunkyung-creator) on CodePen. 3.html See the Pen OJpGjVg by 이윤경 (@yunkyung-creator) on CodePen. 2021. 6. 20.

이전 1 2 3 4 ··· 10 다음

티스토리툴바