본문 바로가기

HTML

[웹] HTML/CSS #13 :: 부트스트랩 반응형 웹 디자인을 할 때 유용한 프레임워크가 있다. 부트스트랩이다. 트위터 개발자들이 만든 CSS 프레임워크이다. 이미 반응형과 관련된 CSS 코드들이 다 만들어져 있고, 내 HTML 소스코드에다가 해당 클래스를 입력하기만 하면 알아서 적용이 된다. 매우 간편하다. 어떤 프레임워크나 마찬가지겠지만, 장단점이 있다. 부트스트랩의 장점은 역시 빠르고 간편하다는 것이다. 이미 만들어져있는 소스를 가져다 쓰기만 하면 되니 빠르다. 직접 하나하나 CSS를 지정해가면서 디자인할 필요가 없는 것이다. 단점이라면 디자인이 정형화 되어있고, 완벽하게 커스터마이징 하기에는 무리가 있달까. 가장 좋은 방법은 부트스트랩으로 그리드를 잡고, 개별 디자인 요소들은 직접 꾸미는 것이라고 생각한다. 부트스트랩의 기본은 그리드다. .. 더보기
[웹] HTML/CSS #12 :: 미디어쿼리 반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를.. 더보기
[웹] 프론트엔드 개발자란? 개발이란 프로그램을 구축, 구현하는 과정을 통틀어 말한다. 그리고 여기에도 각각 분야가 있다. 개인적으로 프로그래밍을 공부할 때 생각보다 많은 프로그래밍 언어가 있다는 것에 놀랐다. 놀랐다기보단 막막했다. 앱 기획을 하다가 프로그래밍에 대한 이해가 필요할 것 같아서 시작했다. 요즘 대세라는 파이썬으로 기초를 익히고, C++, 자바 정도 배우면 되는 줄 알았다. 그런데 일일이 열거하기도 귀찮을만큼 많은 언어가 있었다. 처음엔 각각의 언어의 특징, 용도를 읽는 데만 꽤 많은 시간을 보냈었다. 알게 된 것은 목적에 맞는 언어가 있다는 것. 즉 C++과 자바를 배우면 아이폰 앱도 만들고, 안드로이드 앱도 만들고, 윈도우 프로그램도 만들고, 홈페이지도 만드는 게 아니라는 것을 알았다. 아이폰 앱을 개발하려면 스위.. 더보기
[웹] HTML/CSS #9 :: HTML5 기본 템플릿 class="class1" id="leader1>a         class="class1">b         class="class1">c         class="class2" id="leader2">d         class="class2">e         class="class2">f     지난 번에 설명 못한 부분이 있다. CSS 선택자 실습할 때 위와 같은 HTML 코드를 사용한 적이 있다. 과 는 순서 없는 리스트와 그 세부 항목을 만드는 태그라고 설명한 적이 있다. 그럼 그 나머지는 무엇일까. 지금부터 알아보겠다.  태그 안의 내용은 삭제하면 위의 코드와 같다. 이게 바로 html의 기본 템플릿이다. 모든 html로 만들어진 웹페이지는 이러한 형식을 갖고 있어야 한다. 그래야 웹 브.. 더보기
[웹] 비전공생도 쉽게 코딩 공부할 수 있는 코드카데미 HTML/CSS는 잠시 쉬고, 오늘은 공부하기 좋은 웹사이트 하나를 추천 겸 소개하려고 한다. Codecademy다. 너무도 정직한 코드를 배우는 학원이라는 네이밍이다. 유투브나 MOOC, 각종 책과 출판사에서 제공하는 무료 강의 등 공부할 수 있는 소스가 너무나 많은 세상이다. 그 중에서도 코딩 기초를 배우기에는 가장 편리한 소스라고 생각한다. 직접 타이핑을 하고 바로 코드 검사를 해주는 웹 어플리케이션으로 학습하기 때문이다. 코드카데미에서 다양한 언어들을 '무료로' 배울 수 있다. 무료라는 점도 좋지만, 인터페이스가 좋아 깔끔한 학습을 경험할 수 있다. 최근에 리뉴얼을 하면서 유료 코스도 생겼는데 그건 안 해봐서 잘 모르겠다. 특정 카테고리에 대해 필요한 부분만 심화해서 배우는 것 같다. 기본 무료 .. 더보기
[웹] HTML/CSS #8 :: CSS 선택자 사실 7편보다 이걸 먼저 했어야 순서상 효율적이지 않았을까 싶다. 그래도 뭐 선택자 개념 배운 다음에 다시 속성 활용해서 실습하면 된다. 1편부터 쭉 봐왔다면 알겠지만 HTML은 내용을 담는 통이고, CSS는 그 내용이 보여지는 모습을 꾸민다. HTML에 태그를 이용해 각각 요소들을 만들어 구성을 짜면, CSS는 각각의 요소들을 어떤 방식으로 표시하라고 브라우저에게 명령한다. 비유적으로 표현하면, HTML은 레고다. 각각의 태그들은 새하얀 레고블럭이다. 그리고 레고블럭들을 이용해 원하는 모양을 만든다. CSS는 그 새하얀 레고블럭들을 칠하는 것이다. 정확히 말해 HTML과 CSS는 이러한 행동을 하라는 지시를 적은 명세서이다. 실제로 레고를 쌓고 블럭을 칠하는 건 브라우저다. 그럼 CSS에는 브라우저가 .. 더보기
[웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성 속성들에 대해 좀 더 디테일을 알아볼 차례다. 모든 속성을 다 소개할 수는 없고 실무에서 자주 쓰이는 대표적인 속성들, 꼭 알아야 하는 것들만 알아보겠다. 그 외에는 그 때 그 때 필요할 때, 이 기능이 있으면 좋을 것 같단 생각이 들 때 검색을 활용하면 된다. 레퍼런스를 참고하거나. HTML 요소의 구조도 1. class 속성 a b c 가장 많이 쓰이는 속성 중 하나다. class는 말 그대로 클래스다. HTML 요소들을 일정 클래스로 분류하는 것. a, b, c 학생(요소)는 1반(클래스)으로 지정하고, d, e, f 학생(요소)는 2반(클래스)로 지정한다면 무엇이 편할까. 클래스는 CSS에서 해당 요소들을 선택하기 위해 사용하는 것이다. 즉 CSS에서 클래스를 선택하여 서식을 적용하면, 해당 클래.. 더보기
[웹] HTML/CSS #6 :: 속성이란? HTML 실습정말 쉬운 실습이건 진짜 시작이 반이다네이버로 가자 빠르게 진행하겠다. 속성은 태그를 보조해주는 역할이다. 태그는 사이에 태그 이름이 들어가 있는 단순한 구조다. 여기에 좀 더 많은 기능을 부여해주는 것이 속성이다. CSS를 통해 태그를 보조해주는 경우가 많지만, 디자인보다 '기능'에 가까운 쪽은 HTML 자체 속성을 활용한다. 위의 표 중에서 맨 아래 요소만 가져와보겠다. #에는 네이버의 메인 주소를 치면 된다. 네이버로 가자 위의 줄 전체, 즉 오프닝 태그부터 클로징 태그까지, 다시 말해 부터 까지를 모두 일컬어 HTML 요소(element)라고 부른다. 그리고 파란색으로 색칠한 와 를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성.. 더보기

티스토리툴바