본문 바로가기

WEB/웹개발 기초 강좌

[웹개발] 7. CSS 레이아웃 - display 2024. 3. 25. 07:30 시작하기 전에... 한동안 블로그 글을 올리지 않게 되어 웹개발 강의글도 올릴 계획이 없었으나.. 최근 몇몇 분들이 후속 포스트도 기대하셔서 조금씩 시간 날 때마다 올려보려고 합니다. 다만 저번 포스트 이후 2~3년이 지난지라, 트렌드도 바뀌고 저도 성장했기에 이전 글과 흐름이 맞지 않거나 제 주관이 강하게 포함될 수도 있습니다. 하지만 가능한 쉽게 배우실 수 있도록 jsfiddle과 같은, 코드를 직접 체험가능한 형태로 제공하고자 합니다. 감사합니다. 개요 이전 포스트에서는 CSS의 요소 배치 (position)에 대해 알아보았다. 이번 포스트에서는 CSS에서 제일 많이 사용하는 속성 중 하나인 "display"에 대해 알아보자. 더보기 Q) position과 display 둘다 요소 배치하는 속성이라..
[웹개발] 6. CSS 요소 배치 - position 2021. 9. 13. 21:32 저번 포스트에서는 CSS의 기본적인 문법과 CSS 파일을 HTML에 적용하는 방법을 배웠다. 이번 포스트에서는 CSS를 통해 HTML의 요소를 배치하고 정렬하는 방법을 배울 것이다. HTML의 요소(태그)들을 배치하는 속성에는 3가지가 있으며, 보통 이들을 조합/혼합하여 사용한다. position - 원하는 위치에 배치하는 방식 float - 특정 요소가 다른 요소의 좌/우에 배치할 수 있게 하는 방식 display - 요소들을 디스플레이 하는 방식 3가지 속성을 혼합하여 사용할 때, 몇몇 속성들은 서로 영향을 줄 수 있다. 이번 포스트에서는 position 속성에 대해서 배운다. position position 속성은 4가지의 값을 가질 수 있는데, 다음과 같다. static (정적) - 요소를 좌->..
[웹개발] 5. CSS 파헤치기 2021. 9. 1. 23:39 강의 첫 편에서도 말했듯이, CSS는 HTML에서 배치된 요소를 디자인하고 재배치하기 위한 언어이다. 해당 언어를 HTML과 함께 쓰면서 어떤 방식으로 사용하는지 파악해보자. HTML에 CSS 적용하기 이 방법에는 3가지가 있다. Inline stylesheet: HTML내 태그의 style 속성에 CSS 코드를 넣는 방법 Internal stylesheet: HTML 문서 내 style 태그 안에 CSS 코드를 넣는 방법 Linking stylesheet: 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 1번 방법은 다음과 같다. 대부분의 태그에는 style 속성을 적용할 수 있다. 매우 쉽고 빠른 방법이고 CSS 파일을 따로 만들 필요가 없어 간편하지만 별로 추천하지 않는 방식이다. 페이지..
[웹개발] 4. HTML - input 태그 2021. 8. 28. 14:54 input 태그는 매우 많이 사용되며, 실용적인 태그 중 하나이다. input 태그 중에서도 종류가 많으므로 잘 외우고 써먹길 바란다. 어떠한 사이트의 회원가입 페이지를 만든다고 생각하고 하나씩 추가하며 태그를 설명하겠다. 일반적인 input 태그 type을 지정하지 않은 상태의 일반적인 input 태그로, 사용자가 텍스트를 입력할 수 있게 해준다. input 태그 (password type) 패스워드와 같은 외부로 노출되면 곤란한 값들을 입력하는 input 태그는 password 타입을 사용하여 노출을 막는다. input 태그 (checkbox type) 여러 옵션들을 선택할 수 있게 해주는 (다중 선택) input 태그이다. 이후 자바스크립트를 통해 실제로 데이터를 수집하여 처리할 수 있다. inpu..
[웹개발] 3. HTML - 태그의 종류와 이해 2021. 8. 28. 14:54 이전 포스팅에서 제시한 태그 종류들 중 head, body, html, title은 대강 설명하였으므로 스킵한다. 2021.08.22 - [WEB] - 2. HTML 파헤치기 2. HTML 파헤치기 HTML은 Hyper Text Markup Language의 줄임말로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. 쉽게 말하면, 웹 페이지의 구조를 만들고 틀을 형성하는 언어이다. 시작하기 전에, 이 강좌보다 훨씬 더 shyunku.tistory.com 스토리라인 태그를 모두 설명하고 난 뒤, 응용학습으로 블로그'인 척하는' 페이지를 만들어 볼 것이다. 물론 그 블로그에 포스팅이나 기타 기능들은 없는 정적 페이지이겠지만, 일단 그러려니하고 보시길 바란다. h 태그 지난 강의에서 설명한 바와 같이, h 태..
[웹개발] 2. HTML 파헤치기 2021. 8. 22. 22:05 HTML은 Hyper Text Markup Language의 줄임말로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. 쉽게 말하면, 웹 페이지의 구조를 만들고 틀을 형성하는 언어이다. 시작하기 전에, 이 강좌보다 훨씬 더 잘 설명하고 이해를 돕는 시각자료를 포함하는 다른 좋은 강좌들이 많으니 검색해보고 튜토리얼을 해보는 것이 좋을 것이다. 생활코딩 - https://opentutorials.org/course/2039 기타 튜토리얼 사이트들 - 제타위키 코드 작성 IDE HTML 코드나 CSS, Javascript 코드를 작성할 때, 특히 이 강좌에서는 Visual Studio Code 라는 프로그램을 사용하는 것을 추천한다. 파일 생성 프로젝트로 사용할 폴더를 하나 생성하고, Visual Code 프..
[웹개발] 1. 웹개발 시작하기 2021. 8. 21. 23:44 웹개발이란, 인터넷이나 인트라넷을 위한 웹사이트를 개발하는 일을 가리킨다. 웹 개발은 가장 단순한 단일 정적 문서의 플레인 텍스트에서부터 가장 복잡한 웹 기반 인터넷 애플리케이션, 전자 비즈니스, 소셜 네트워크 서비스에 이르기까지 개발 범위가 다양하다. 웹개발을 이해하는 것은 크게 어렵지 않다. 위의 사진들은 유명 포털사이트들의 홈페이지이다. 웹개발 자체의 의미는 사전적 의미와 같이 텍스트로만 이루어진 페이지부터 복잡한 웹 애플리케이션까지 다양한 범위를 아우르고 있으나, 내가 설명하는 웹개발은 개발자로서 웹 페이지를 제작하고 운영하는 등의 내용까지만 포함한다. 그러므로 웹이 무엇이고 ipv4, ipv6, tcp가 무엇이고 웹 어셈블리가 무엇인지, 내부적으로 어떠한 방식으로 작동하는지에 대한 구구절절하고 ..

티스토리툴바