이번 글에서는 티스토리 및 워드프레스 초보를 위한 기초개념 설명을 드려볼까 합니다. 도대체 HTML과 CSS의 차이가 정확 뭔지 궁금하신 분들이 많을 꺼에요. 그리고 워드프레스를 하는 분들은 php파일도 자주 접하실 텐데요. 어떤 차이가 있는지 대략적으로 한 번 알려드리도록 하겠습니다. 아랫글을 한 번 참조해 주세요
여러분은 HTML을 이미 알고 있습니다
아마 티스토리 스킨편집에 들어가서 <head>에서 뭔가 태그를 넣어보신 분들은 도대체 이게 어느나라 말인가 싶으실 거에요. 처음 보는 알파벳이 여기저기 복잡하게 나와 있어서 난감하셨을 것 같습니다. 물론 저도 처음엔 그랬어요. 그럼 간단하게 가장 많이 궁금해 하시는 html과 css의 차이를 말씀드리겠습니다.
HTML 과 CSS 의 차이
결론부터 말씀드리면, HTML은 웹 페이지라는 ‘건물’을 만들 때 ‘뼈대’를 만드는 역할을 하며, CSS는 이 ‘뼈대’를 꾸미고 디자인하고 스타일링 합니다. 그래서 HTML과 CSS는 보통 둘 다 같이 다니며 사용됩니다. 그런데 이 둘의 좀 역할이 달라요. HTML은 사이트의 구조를 정의하고 내용을 배치하는 데 사용되는 반면, CSS는 이 내용의 스타일과 디자인을 지정하는 데 사용됩니다. 아래에서 좀 더 상세하게 말씀드려볼게요
HTML (HyperText Markup Language)
HTML은 웹 페이지의 구조와 내용을 나타내는 마크업 언어입니다. 마크업 언어란 문서의 구조와 표현을 나타내는 언어를 말합니다. 본문에 쓰는 일반 텍스트와 구분되어 특정 요소나 부분을 태그로 둘러싸는 방식으로 사용됩니다. 건물의 ‘뼈대’라고 설명드렸었죠. 웹 페이지의 어디에 제목이 위치하고, 어디에 본문이 있으며, 어디에 이미지와 링크가 있는지를 html에서 결정하게 되는 겁니다. 그리고 텍스트, 이미지, 링크, 표, 목록 등을 배치하는 역할을 합니다.
대표적인 html 언어 예시
웹페이지를 만들 때 사용하는 대표적인 HTML 태그와 예시를 적어보겠습니다. < >로 코드를 감싸는 형태에요.
<!DOCTYPE html>: HTML 문서의 타입을 선언하는 태그로, 최신 버전의 HTML을 사용할 때 사용됩니다.
<html>: HTML 문서의 시작과 끝을 정의하는 태그입니다.
<head>: 문서의 메타 정보와 외부 자원을 정의하는 태그입니다.
<title>: 웹 페이지의 제목을 정의하는 태그입니다.
<meta>: 문서의 메타 데이터(문자 인코딩, 뷰포트 설정 등)를 설정하는 태그입니다.
<link>: 외부 스타일 시트 파일(CSS)이나 아이콘을 연결하는 태그입니다.
<script>: JavaScript 코드를 포함하거나 외부 스크립트 파일을 연결하는 태그입니다.
<body>: 웹 페이지의 실제 내용을 담는 태그입니다.
<h1>, <h2>, ..., <h6>: 제목을 나타내는 태그로, 크기와 중요도에 따라 달라집니다.
<p>: 단락을 나타내는 태그로, 텍스트를 문단으로 구분합니다.
<a>: 하이퍼링크를 생성하는 태그로, 다른 웹 페이지나 문서로 연결할 수 있습니다.
<img>: 이미지를 삽입하는 태그로, 이미지 파일의 경로를 지정하여 표시합니다.
<ul>, <ol>, <li>: 순서 없는 목록(Unordered List)과 순서 있는 목록(Ordered List)을 생성하는 태그입니다.
<div>: 구역을 나누거나 그룹화할 때 사용되는 태그로, CSS 스타일링에 활용됩니다.
<span>: 텍스트의 일부분을 감싸 스타일을 적용하거나 스크립트와 상호 작용할 때 사용합니다.
가장 그래도 눈에 익은 언어이실 거에요
CSS (Cascading Style Sheets)
CSS는 웹 페이지의 시각적인 디자인과 스타일을 담당하는 언어입니다. 이건 건물 내 외부의 “인테리어” 나 “페인트칠” 등에 비유할 수 있습니다. CSS는 HTML에서 정의한 내용들에 대한 스타일을 지정합니다. 예를 들면 글꼴, 색상, 여백, 배경, 레이아웃 등을 결정하여 웹 페이지를 예쁘게 꾸밀 수 있게 해줍니다. 큰 틀에서 결정된 HTML의 구조를 기반으로 시각적으로 웹 페이지의 디자인을 개선하고 개인화할 수 있는 역할을 하는 거죠.
대표적인 CSS 언어 예시
웹페이지를 꾸밀 때 사용하는 대표적인 Css 태그와 예시를 들어볼게요. CSS에서는 어떤 걸(what to change) 정의하느냐 정할 때 선택자 (Selector) 라는 단어를 씁니다. 선택자 뒤에 { 를 쓰고 다음 줄에 해당 내용, 그리고 마지막 줄에 } 로 마무리하는 게 좀 특이하죠. 줄간격이 안맞아서 더 헷갈리나 봅니다.
1. 선택자 : body / 예시: 모든 페이지의 본문 배경색 변경
body {
background-color: lightgray;
}
2. 선택자 : h1 / 예시: 모든 h1 제목의 글꼴과 색상 변경
h1 {
font-family: Arial, sans-serif;
color: blue;
}
3. 선택자 : .class-name / 예시: 특정 클래스를 가진 요소들에 스타일 적용
.highlight {
background-color: yellow;
}
4. 선택자: #id-name / 예시: 특정 ID를 가진 요소에 스타일 적용
#header {
font-size: 24px;
}
5. 선택자 : p:first-child / 예시: 첫 번째 단락에 스타일 적용
p:first-child {
font-weight: bold;
}
6. 선택자: a:hover / 예시: 링크에 마우스 오버 시 스타일 변경
a:hover {
color: red;
text-decoration: underline;
}
7. 선택자: ul > li / 예시: 목록 요소 안의 리스트 아이템에 스타일 적용
ul > li {
margin-left: 20px;
}
8. 선택자: @media (max-width: 768px) / 예시: 반응형 디자인을 위해 특정 화면 너비에서의 스타일 변경
@media (max-width: 768px) {
body {
font-size: 14px;
}
}자 여기까지 보시고 이제 웹페이지를 보시면 이젠 뭔가 보이실 거에요.
프로그래밍 언어
위의 언어들이 웹페이지의 구조와 디자인에 관련된 언어들이었다면, 프로그래밍 언어는 컴퓨터에게 작업을 지시하는 데 사용되는 명령어 집합입니다. 대표적인 프로그래밍 언어로는 Python, Java, C++, JavaScript, Ruby 등이 있습니다. 이러한 언어는 변수, 조건문, 반복문, 함수 등을 이용하여 컴퓨터 프로그램을 작성할 수 있게 해줍니다.
요약하자면, HTML은 웹 페이지의 구조를, CSS는 디자인을, 프로그래밍 언어는 복잡한 로직과 기능을 구현하는 데 사용됩니다.
php의 대표적인 언어 예시
워드프레스의 테마에 주로 쓰이는 php 언어의 예시는 다음과 같습니다. 해당 코드의 내용이 무슨 말인지 모르셔도 됩니다. 어차피 해석은 gpt한테 물어보면 되니까요. 시작과 끝은 줄이 다르지만 <?php >로 앞뒤를 감싸고 있네요.
1. 테마 기본 구조 설정
<?php
// 테마의 기본 구조를 설정하는 파일
// 헤드 섹션 출력
get_header();
// 콘텐츠 영역 출력
if (have_posts()) {
while (have_posts()) {
the_post();
the_content();
}
}
// 푸터 섹션 출력
get_footer();
?>
2. 포스트 루프
<?php
// 포스트 루프를 사용하여 최근 글 목록을 표시하는 예제
if (have_posts()) {
while (have_posts()) {
the_post();
the_title(); // 글 제목 출력
the_content(); // 글 내용 출력
}
}
?>
3. 사용자 정의 템플릿 만들기
<?php
// 특정 페이지에 사용자 정의 템플릿 적용하는 예제
/* Template Name: 사용자 정의 템플릿 */
// 이 템플릿을 사용하여 페이지를 디스플레이
get_header();
// 페이지 내용 출력
if (have_posts()) {
while (have_posts()) {
the_post();
the_title();
the_content();
}
}
get_footer();
?>
중간중간 일부러 빨간색으로 표시 했는데요, // 라는 표시 뒤에 한글로 설명도 있구요. 그걸 주석이라고 합니다.
각 언어별 주석 형태 차이
주석(Comment)은 프로그래밍 코드 내에서 사람들이 읽을 수 있는 메모나 설명을 추가하는 걸 말합니다. 주석처리한 부분은 실제로 프로그램 실행에 영향을 주지 않습니다. 주석은 보는 사람으로 하여금 코드를 이해하기 쉽게 하거나, 다른 개발자와 협업할 때 도움이 되죠. 근데 언어별로 쓰는 주석을 쓰는 방식이 달라서 볼 때 좀 헷갈리셨을 거에요.
HTML 주석
<!-- --> 형식의 주석은 HTML과 XML 문서에서 사용되는 주석 방식입니다. 주로 웹 페이지의 구조와 내용을 설명하거나 비활성화할 때 사용됩니다.
<!-- 이 부분은 웹 페이지의 헤더입니다 --> 이건 단순 주석처리에요
<header>
<h1>웹 페이지 제목</h1>
</header>
<!-- <div class="debug-info">디버깅 정보 출력</div> -->
이런 식으로 기존 코드의 앞뒤를 주석처리 해버리면 그 코드는 비활성화 됩니다.CSS 주석
CSS 주석은 스타일 시트에서 스타일링을 설명하거나 임시로 비활성화할 때 사용됩니다. .
/* 이 부분은 글꼴과 색상을 지정하는 스타일입니다 */
p {
font-family: Arial, sans-serif;
color: #333;
}프로그래밍 언어 주석
프로그래밍 언어의 주석 처리 방식에는 두 가지 유형이 있습니다. // 와 /* */는 주로 프로그래밍 언어에 따라 다르게 사용되는 주석 처리 방식입니다.
// 한줄 주석처리 예제입니다.
String userName = "John";
System.out.println("Hello, " + userName + "!");
/*
이 부분은
여러 줄의 주석 처리 예제입니다.
*/
$another_variable = "Hello, world!";