HTML/CSS로 실험 프로토콜 웹페이지 만들기

실험 프로토콜을 Word나 PDF로 공유해본 적 있으신가요? 버전이 꼬이고, 포맷이 깨지고, "최종_최종_진짜최종.docx"가 쌓이죠.

웹페이지는 다릅니다. URL 하나면 누구나 최신 버전을 볼 수 있고, 어떤 기기에서든 깔끔하게 표시됩니다. 실험 노트북에서 웹 브라우저로 — 프로토콜의 진화입니다.

HTML: 문서의 뼈대

HTML은 "이건 제목이야", "이건 목록이야"를 브라우저에게 알려주는 태그 언어입니다. DNA 서열에서 코돈이 아미노산을 지정하듯, HTML 태그는 콘텐츠의 역할을 지정합니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Western Blot 프로토콜</title>
</head>
<body>
  <h1>Western Blot 프로토콜</h1>
  <p>Target: EGFR (Epidermal Growth Factor Receptor)</p>
  <p>Last updated: 2026-06-27</p>
</body>
</html>

핵심 태그 정리:

<h1> ~ <h6>: 제목 (h1이 가장 큼) — 논문의 Section/Subsection과 같습니다
<p>: 문단 — 본문 텍스트
<ul>, <ol>: 순서 없는/있는 목록 — 재료 목록, 실험 단계
<strong>: 굵은 글씨 — 중요한 농도, 온도 강조
<a href="...">: 링크 — 참고 논문, 제품 페이지 연결

목록으로 재료와 단계 정리하기

실험 프로토콜의 핵심은 재료 목록과 단계별 절차입니다.

html

<h2>필요 재료</h2>
<ul>
  <li>1차 항체: Anti-EGFR (1:1000 희석)</li>
  <li>2차 항체: Anti-rabbit HRP (1:5000)</li>
  <li>PVDF 막 (0.45 μm)</li>
  <li>전사 버퍼: 25 mM Tris, 192 mM Glycine, 20% Methanol</li>
</ul>

<h2>실험 단계</h2>
<ol>
  <li>SDS-PAGE 겔 준비 (10% 분리 겔 + 5% 적층 겔)</li>
  <li>단백질 로딩: 각 웰에 <strong>30 μg</strong> 로딩</li>
  <li>전기영동: <strong>120V, 90분</strong></li>
  <li>PVDF 막으로 전사: <strong>100V, 60분</strong> (얼음 위)</li>
  <li>블로킹: 5% 탈지유/TBST, <strong>실온 1시간</strong></li>
  <li>1차 항체 반응: 4°C, <strong>overnight</strong></li>
  <li>세척: TBST로 5분 × 3회</li>
  <li>2차 항체 반응: 실온, 1시간</li>
  <li>ECL 검출</li>
</ol>

<ul>은 재료처럼 순서가 상관없는 것, <ol>은 실험 단계처럼 순서가 중요한 것에 씁니다.

CSS: 문서에 스타일 입히기

CSS는 HTML의 "옷"입니다. 같은 DNA 서열도 시각화 방법에 따라 전혀 다르게 보이듯, 같은 HTML도 CSS에 따라 완전히 달라집니다.

html

<style>
  body {
    font-family: 'Pretendard', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    line-height: 1.7;
    color: #1a1a1a;
  }

  h1 {
    color: #2d5a3d;
    border-bottom: 3px solid #2d5a3d;
    padding-bottom: 8px;
  }

  h2 {
    color: #3d7a5a;
    margin-top: 32px;
  }

  strong {
    color: #c0392b;
    background: #fef3f2;
    padding: 1px 4px;
    border-radius: 3px;
  }

  li {
    margin-bottom: 8px;
  }
</style>

핵심 CSS 속성:

font-family: 폰트 — 가독성의 시작
max-width + margin: 0 auto: 중앙 정렬 — 읽기 편한 너비
line-height: 줄 간격 — 1.7이 학술 문서에 최적
color: 글자 색상 — 중요 수치 강조에 활용
border-bottom: 하단 선 — 섹션 구분

표로 조건 정리하기

실험 조건을 표로 정리하면 한눈에 비교할 수 있습니다.

html

<h2>항체 조건 요약</h2>
<table>
  <thead>
    <tr>
      <th>항체</th>
      <th>희석 비율</th>
      <th>반응 조건</th>
      <th>시간</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anti-EGFR (1차)</td>
      <td>1:1000</td>
      <td>4°C</td>
      <td>Overnight</td>
    </tr>
    <tr>
      <td>Anti-rabbit HRP (2차)</td>
      <td>1:5000</td>
      <td>실온</td>
      <td>1시간</td>
    </tr>
  </tbody>
</table>

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: left;
  }
  th {
    background: #f0f7f4;
    font-weight: 600;
    color: #2d5a3d;
  }
  tr:hover {
    background: #f9fafb;
  }
</style>

주의사항 박스 만들기

프로토콜에서 "이것만은 꼭!" 하는 주의사항을 눈에 띄게 만듭니다.

html

<div class="warning">
  <strong>주의:</strong> 전사 시 반드시 얼음 위에서 진행하세요.
  메탄올이 포함된 전사 버퍼는 발열하며,
  과열 시 단백질 변성이 발생합니다.
</div>

<div class="tip">
  <strong>팁:</strong> PVDF 막은 사용 전 메탄올에
  30초간 활성화해야 합니다. 건조된 막은 단백질이 붙지 않습니다.
</div>

<style>
  .warning {
    background: #fef3f2;
    border-left: 4px solid #e74c3c;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 16px 0;
    line-height: 1.6;
  }
  .tip {
    background: #f0f7f4;
    border-left: 4px solid #2d5a3d;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 16px 0;
    line-height: 1.6;
  }
</style>

직접 해보기 (Faded Example)

아래 빈칸을 채워 실험 재료 목록을 HTML로 완성하세요.

빈칸 채우기html

<h2>필요 재료</h2>
< >
<li>PBS buffer (pH 7.4)</li>
<li>Trypsin-EDTA (0.25%)</li>
<li>FBS (10%)</li>
</ >

흔한 에러 & 해결법

Q: 글자가 너무 작아서 안 보입니다

body에 font-size: 16px 이상을 설정하세요. 브라우저 기본값은 16px이지만, 명시적으로 지정하는 것이 좋습니다.

Q: 태그를 닫지 않으면 어떻게 되나요?

HTML은 관대해서 에러 없이 넘어가지만, 레이아웃이 예상과 다르게 나옵니다. 여는 태그(<ul>)를 쓰면 반드시 닫는 태그(</ul>)를 쓰세요.

Q: CSS가 적용이 안 됩니다

<style> 태그가 <head> 안에 있는지, 선택자(selector)의 철자가 맞는지 확인하세요. 클래스 선택자는 .warning처럼 점(.)으로 시작합니다.

Q: <script>는 <head> 안에만 있어야 하나요? <body>에 넣으면 안 되나요?

둘 다 가능하지만, 실무에서는 <body> 맨 아래에 두는 경우가 많습니다. 이유는 두 가지:

브라우저는 HTML을 위에서부터 순서대로 읽습니다. <head>에 <script>가 있으면 화면을 그리기 전에 스크립트를 실행해서 로딩이 느려질 수 있습니다.
document.getElementById("result") 같은 코드가 <head>에서 실행되면, 아직 <body>의 요소가 만들어지지 않아 null이 됩니다.

<head> 안에 두고 싶다면 defer 속성을 추가하세요: <script defer src="app.js"></script>. 이러면 HTML 해석이 끝난 후에 실행됩니다.

Q: 절대 경로(/page)와 상대 경로(page)의 차이가 뭔가요?

절대 경로: /로 시작. 서버 루트 기준. /samples/list는 항상 http://도메인/samples/list를 가리킵니다.
상대 경로: / 없이 시작. 현재 문서 위치 기준. 현재 페이지가 http://도메인/admin/dashboard이면, list는 http://도메인/admin/list를 가리킵니다.

링크나 폼의 action에서 경로가 의도와 다르게 동작한다면, 절대/상대 경로를 혼동한 것이 원인일 가능성이 높습니다.

Q: GitHub Pages에 올렸는데 404가 뜹니다

GitHub Pages는 기본적으로 index.html 파일을 첫 페이지로 찾습니다. 파일명이 my_page.html처럼 다른 이름이면 URL에 파일명을 직접 입력해야 합니다. 또한 파일명에 공백이 있으면 URL에서 %20으로 인코딩해야 합니다. 가능하면 파일명에 공백 없이, 메인 페이지는 index.html로 만드세요.