동맥과 정맥 코딩

 동맥과 정맥을 시각적으로 표현할 수 있는 HTML, CSS, JavaScript로 간단한 웹 페이지를 만들어보겠습니다. 이 페이지는 사용자가 동맥과 정맥을 시각적으로 살펴볼 수 있도록 기본적인 구조와 스타일을 제공합니다. 여기에 각 혈관 시스템의 주요 기능에 대해 설명하는 텍스트도 추가할 수 있습니다.

이 예시에서는 혈관을 간단한 원과 선으로 묘사하여, 동맥과 정맥이 어떻게 서로 다르고 어떤 역할을 하는지 시각적으로 나타내도록 하겠습니다.

1. HTML - 기본 구조

html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>동맥과 정맥</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>동맥과 정맥</h1>
        <div class="vascular-system">
            <div class="artery">
                <h2>동맥</h2>
                <div class="artery-vessel"></div>
                <p>동맥은 산소가 풍부한 혈액을 심장에서 각 부위로 운반합니다.</p>
            </div>
            <div class="vein">
                <h2>정맥</h2>
                <div class="vein-vessel"></div>
                <p>정맥은 산소가 부족한 혈액을 각 부위에서 심장으로 되돌려 보냅니다.</p>
            </div>
        </div>
        <div class="control-panel">
            <button onclick="showDetails('artery')">동맥 자세히 보기</button>
            <button onclick="showDetails('vein')">정맥 자세히 보기</button>
        </div>
        <div id="details"></div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

2. CSS - 스타일링

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f3f3f3;
    color: #333;
}

.container {
    text-align: center;
    padding: 30px;
}

h1 {
    margin-bottom: 20px;
}

.vascular-system {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 20px;
}

.artery, .vein {
    width: 200px;
    text-align: center;
}

.artery-vessel, .vein-vessel {
    width: 100px;
    height: 300px;
    margin: 10px auto;
    border-radius: 50%;
    background-color: #007bff; /* 동맥은 파란색 */
    box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.5);
}

.vein-vessel {
    background-color: #dc3545; /* 정맥은 빨간색 */
    box-shadow: 0px 0px 10px rgba(220, 53, 69, 0.5);
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}

#details {
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 80%;
    margin: 0 auto;
    display: none;
}

3. JavaScript - 동작 제어

javascript
function showDetails(type) {
    const detailsDiv = document.getElementById('details');
    
    if (type === 'artery') {
        detailsDiv.innerHTML = `
            <h3>동맥 자세히 알아보기</h3>
            <p>동맥은 심장에서 나오는 고압의 혈액을 몸의 여러 부위로 운반합니다. 동맥은 두꺼운 벽과 탄력적인 성질을 가지고 있어, 심장 수축에 의해 생성된 압력을 견디며 혈액을 운반합니다. 주요 동맥으로는 대동맥, 경동맥, 상완동맥 등이 있습니다.</p>
            <ul>
                <li><strong>대동맥</strong>: 심장에서 나오는 가장 큰 동맥, 전신으로 산소를 공급.</li>
                <li><strong>경동맥</strong>: 목을 통해 뇌로 혈액을 운반.</li>
                <li><strong>상완동맥</strong>: 팔에 혈액을 공급.</li>
            </ul>
        `;
    } else if (type === 'vein') {
        detailsDiv.innerHTML = `
            <h3>정맥 자세히 알아보기</h3>
            <p>정맥은 혈액을 심장으로 되돌려 보내는 혈관입니다. 혈액의 압력은 동맥보다 낮으며, 대부분 산소가 부족한 혈액을 운반합니다. 정맥에는 역류를 방지하는 판막이 있어 혈액이 한 방향으로만 흐르도록 돕습니다. 주요 정맥으로는 대정맥, 경정맥, 상완정맥 등이 있습니다.</p>
            <ul>
                <li><strong>대정맥</strong>: 전신에서 혈액을 심장으로 되돌려보내는 큰 정맥.</li>
                <li><strong>경정맥</strong>: 목에서 혈액을 심장으로 운반.</li>
                <li><strong>상완정맥</strong>: 팔에서 혈액을 심장으로 되돌려보냄.</li>
            </ul>
        `;
    }

    detailsDiv.style.display = 'block';
}

4. 파일 구조

  • index.html : HTML 구조 파일

  • styles.css : 스타일링 파일

  • scripts.js : JavaScript 동작 제어 파일

설명:

  • HTML: 동맥과 정맥을 표시하는 두 개의 섹션을 만들고, 각각에 간단한 설명과 버튼을 추가했습니다. 버튼을 클릭하면 해당 혈관 시스템에 대한 자세한 정보가 나타납니다.

  • CSS: 동맥은 파란색, 정맥은 빨간색으로 시각적으로 구분했으며, 혈관 모양을 간단한 원 모양으로 나타냈습니다.

  • JavaScript: 버튼을 클릭하면 혈관에 대한 더 자세한 설명을 표시하는 기능을 구현했습니다. 각 혈관에 대한 정보는 HTML 내부에서 동적으로 변경됩니다.

실행 방법:

  1. 위의 HTML, CSS, JavaScript 코드를 각각 파일에 저장합니다.

    • index.html : HTML 코드

    • styles.css : CSS 코드

    • scripts.js : JavaScript 코드

  2. 브라우저에서 index.html 파일을 열어보면 동맥과 정맥에 대한 설명과 함께 시각적으로 구분된 혈관을 볼 수 있으며, 버튼을 클릭하여 추가적인 정보를 확인할 수 있습니다.

이 예시는 간단하지만 동맥과 정맥에 대한 기본적인 시각적 이해를 돕는 데 유용한 웹 페이지입니다. 추가적으로 동맥과 정맥의 동적 애니메이션이나 그래픽을 사용하여 더 발전시킬 수 있습니다.

댓글

댓글 쓰기

가장 많이 본 글