본문 바로가기
반응형

Web Front27

[JS] 자바스크립트와 첫 만남 Preface 이번 장에선 자바스크립트란 무엇인지, 이를 통해 어떤 작업을 할 수 있는지 등을 알아봤다. 입출력 방법이나 함수 등에 관한 내용은 뒤에서 더욱 자세히 배울 것 같고, 스타일 가이드는 다른 언어들과 크게 다른 부분이 없어 딱히 적을 내용이 없다. 1. 자바스크립트로 무엇을 할까 - 자바스크립트의 주요 기능 1) 웹의 요소를 제어한다. (웹 사이트 UI 부분에 많이 활용) 2) 웹 어플리케이션을 만든다. 3) 다양한 라이브러리를 사용한다. (리액트, 앵귤러, 뷰, 제이쿼리 등) 4) 서버 개발을 할 수 있다. (Node.js) 2. 웹 브라우저가 자바스크립트를 만났을 때 - 자바스크립트 소스는 3. 자바스크립트 용어와 기본 입출력 방법 - 식(표현식): 연산식뿐만 아니라 실제 값, 함수를 실행.. 2022. 8. 3.
[CSS] 반응형 웹과 미디어 쿼리 Preface 이번 장에선 반응형 웹을 만드는 방법을 공부했다. 내용이 워낙 많아 공부할 때도, 블로그를 작성할 때도 시간이 오래 걸렸지만, 내용 자체는 한 번 읽어보면 충분히 이해할 수 있는 내용들이라 어렵지 않게 진도를 나갈 수 있었다. 이번 장을 마지막으로 책에 있는 CSS의 모든 내용을 끝냈는데, 후반부의 내용들은 아직 익숙치 않아 CSS를 사용하여 막힘 없이 원하는 웹 페이지를 제작하려면 시간이 조금 걸릴 것 같다. 주변에서 웹 공부가 프로그래밍 언어나 DB 공부보다 훨씬 재밌다는 이야기를 많이 들었는데, 나는 잘 모르겠다. 확실히 난이도 자체가 쉽긴 하지만, 난 아무래도 백엔드 영역 공부가 훨씬 흥미롭고 재미있는 것 같다. 1. 반응형 웹 알아보기 - 반응형 웹 디자인: 웹 요소를 화면 크기에.. 2022. 8. 3.
[CSS] 트랜지션과 애니메이션 Preface 이번 장에선 코드에 변형과 트랜지션, 애니메이션을 적용해 특정 효과가 있는 웹 요소를 정의하는 방법을 공부했다. 이전 내용들에 비해 다소 복잡한 내용들이 많았고, 특히 마우스 오버를 하면 상품 정보를 표시하는 코드가 어려웠다. CSS의 기본적인 내용은 대부분 익혔다고 생각했는데, 책에서 다루지 않은 부분들이 아직 많다는 것을 새삼 느낄 수 있었다. 그러나 어렵고 복잡한 만큼 해당 속성들을 사용하면 웹 요소가 훨씬 고급지고 풍성해져서 보는 맛이 있는 것 같다. 1. 변형 알아보기 - CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다. transform: 함수 - 변형의 종류 1) 2차원 변형: 웹 요소를 평면에서 변형한다. → x축은 오른쪽으로 갈수록.. 2022. 8. 1.
[CSS] CSS 고급 선택자 Preface 이번 장에선 기존의 선택자 외의 다양한 선택자와 가상 클래스를 공부했다. 이런저런 선택자를 사용해보며 CSS는 사용자의 편의를 위한 부분이 제대로 확립되어 있다는 생각을 했다. 그러나 그 종류가 너무 다양해서 모든 선택자를 암기하고 사용하는 것은 사실상 어려울 것 같고, 사용 빈도가 높은 선택자를 제외하곤 필요할 때마다 찾아서 사용하는 것이 맞는 것 같다. 이번 장에서 배운 내용중에 제일 마음에 드는 선택자는 :hover 가상 클래스 선택자이다. 뭐랄까, 마우스 포인터를 가져갔을 때 메뉴의 배경색이 바뀌는 것만으로도 굉장히 세련된 느낌을 주는 것 같다. 1. 연결 선택자 - 연결 선택자: 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. → 그룹 선택자는 둘 이상.. 2022. 7. 30.
[CSS] 이미지와 그라데이션 효과로 배경 꾸미기 Preface 이번 장에선 배경색과 배경 이미지를 지정하는 방법과 그라데이션 효과를 사용하는 방법을 공부했다. 지난 장의 마지막 부분에서 배경 이미지를 사용한 예제를 수정할 때 마음대로 되지 않는 부분이 있었는데, background 속성을 배운 후 다시 보니 쉽게 문제를 해결할 수 있었다. 아, 그리고 같이 공부하는 친구와 블로그 스킨에 대해 이야기하던 도중 며칠 전 공부한 웹 폰트가 생각나 친구의 블로그 헤더 부분의 글씨체를 바꿔줬다. 1. 배경색과 배경 범위 지정하기 - background-color 속성: 배경색을 지정한다. → 상속되지 않는다. - background-clip: 배경색의 적용 범위를 조절한다. 1) border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값) 2.. 2022. 7. 28.
[CSS] 레이아웃을 구성하는 CSS 박스 모델 (2) Preface 이번 장에선 display와 float 속성을 사용하여 원하는 위치에 요소를 나타내는 방법을 공부했다. 유튜브 강의로 이 부분을 봤을 땐 어렵다고 느꼈었는데, 막상 책을 보며 실습하자 크게 어렵진 않았다. 다만, 이번 장의 마지막 부분에 있는 position: absolute 속성을 사용하여 사진 위에 텍스트를 표현하는 예제와 마무리 문제 3번은 조금 헷갈리는 부분이 있었다. 전자는 텍스트의 위치 값이 마음대로 조절되지 않았고, 후자에선 링크 요소인 a의 display 속성을 block으로 지정했는데도 float: left 속성을 통해 모든 요소가 한 줄에 가로로 나타나는 것이 이해 되지 않았다. 내가 공부한 내용에 따르면 블록 요소는 한 줄을 전부 차지하는데, float를 사용하면 이 특.. 2022. 7. 27.
[CSS] 레이아웃을 구성하는 CSS 박스 모델 (1) Preface 이번 장에선 기본적인 박스 모델을 만들어보고, 지난 장에서 언급했던 마진과 패딩에 대해 다시 한 번 자세히 공부했다. 처음 마진과 패딩의 정의를 봤을 땐 솔직히 잘 이해가 되지 않았었는데, 직접 두 속성을 코드에 적용해보며 비교하자 두 개념의 차이점을 확실히 알 수 있었다. 1. CSS와 박스 모델 - 블록 레벨 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 1) 해당 요소의 너비가 100%이다. 2) 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. - 인라인 레벨 요소: 콘텐츠만큼만 영역을 차지하는 것 1) 나머지 공간에 다른 요소가 올 수 있다. - 박스 모델 요소: 박스 형태인 요소 - 박스 모델의 구성 1) 콘텐츠 영역 2) 패딩 3) 테두리 4) 마진 etc. -.. 2022. 7. 26.
HTML, CSS 태그 및 속성 Preface 헷갈리는 태그나 속성이 있을 때마다 매번 블로그 글이나 책을 찾다 보니 시간이 너무 오래 걸린다. 웹 언어들의 주요 태그나 속성들을 한 눈에 쉽게 보고자 글을 업로드한다. 1. HTML ○ 태그 종류 설명 문서 유형을 지정한다. 웹 문서의 시작과 끝을 나타낸다. 웹 브라우저가 문서를 해석하는 데 필요한 정보를 입력한다. 웹 문서와 관련된 정보를 지정할 때 사용한다. 문서의 제목을 나타낸다. 실제 웹 브라우저에 표시할 내용을 입력한다. 헤더 영역을 의미한다. 같은 웹 문서 안에서 다른 위치로 연결하거나다른 웹 문서로 연결하는 링크를 만든다. 웹 문서에서 핵심이 되는 내용을 넣는다. 웹에서 실제로 보여주고 싶은 내용을 넣는다. 웹 문서에서 콘텐츠 영역을 나타낸다. 사이드 바를 만든다. 웹 문서.. 2022. 7. 26.
[CSS] 텍스트를 표현하는 다양한 스타일 Preface 이번 장에선 CSS의 다양한 속성들을 공부했다. 알아야 할 속성들이 너무 많아서 머리가 아플 지경이다. 아, 그리고 HTML의 태그들 중 기억이 잘 나지 않는 태그들이 많아 이들을 따로 정리하려고 카테고리를 하나 만들었다. HTML, CSS, JS의 태그와 속성 들을 한 눈에 보기 좋게 정리해 놓고 필요할 때마다 볼 생각이다. 1. 글꼴 관련 스타일 - font-family 속성: 웹 문서에서 사용할 글꼴을 지정한다. 1) 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. → 1번 째 설정한 글꼴을 가져올 수 없을 때(네트워크 상의 문제 등) 2번째 설정한 글꼴을 지정한다. 2) 두 단어 이상으로 된 글꼴 이름은 큰따옴표로 묶어서 표현한다. font-famil.. 2022. 7. 23.
[CSS] CSS의 기본 Preface 이번 장에선 CSS의 문법 구조를 간략히 공부했다. CSS도 문법 자체는 크게 어려운 부분이 없지만, HTML의 태그와 마찬가지로 스타일 속성 값의 종류가 다양한 것 같다. 무엇보다 파이썬, MySQL, HTML, CSS 등 여러가지 언어를 배우다보니 여러 언어의 문법이 뒤섞여 헷갈린다;;; 1. 웹 문서에 디자인 입히기 - 스타일(style): 문서의 겉모습을 결정짓는 것 - 스타일을 사용하는 이유 1) 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. 2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. → 반응형 웹 디자인: 전자기기의 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법 2. 스타일과 스타일 시트 - CSS 스타일의 형식 선택자 { 속성1:.. 2022. 7. 21.

티스토리툴바