728x90
728x90

내가 만든 과제: 더 꾸민 버전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body style="background-image:url('source/backgroundsea.jpeg');">
    <div class="mainblogbox">
        <p class="title">insidepixce</p>
        <p>1시간 전</p>
        <div class="titletext">
            <p><strong>우리의 청춘을 썩히지 않아</strong></p>
            <p>너를 만나 같이 더 빛나, 아름다운 시간만 쌓자! 시작이라는 걸 넌 믿을 수 있겠니? 이제야 사랑을 알 것 같아미래의 미래에도 널 사랑한 나란 걸, Ready or not, 가는 거야 나를 믿어 here we go, here we go 온 세상과 저 광야 위로 후회 없이 사랑했다고 말하게 </p>
        </div>
        <div class="titleimage">
            <img src="source/Myselfie.jpeg" class="profile">
    </div>
</body>
</html>
  • 시행착오

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="blog-content"> </div>
            <div class= "blog-name"> 
                <img src="source/Myselfie.jpeg" class="blog-profile">
                <div>
                <h4 class= 'testy'>insidepixce</h4>
                <p class = 'testy'>1시간 전</p>
                </div>
            </div>
        <div class="blog-img">
            <img src="source/Myselfie.jpeg" width="100%">
        </div>
    </div>
</body>
</html>
.blog-content {
    width: 80%;
    height: 200px;
    background : Red;
    float:left;

    
}

.blog-img {
    width: 20%;
    height:200px;
    background:yellow;
    float:left;
}

.container{
    width:800px;
   
    float:left;
}

.blog-profile {
    width: 50px;
    float: left;
    
}

.blog-name {

    float:left;
}

.testy{
    float:left;
}



.blog-content {
    width: 80%;
    height: 200px;
    background : Red;
    float:left;

    
}

.blog-img {
    width: 20%;
    height:200px;
    background:yellow;
    float:left;
}



.blog-profile {
    width: 50px;
    float: left;
    
}

.blog-name {

    float:left;
}

.testy{
    float:left;
}

.profile {
    width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 2px solid white;
    float:left;
}

.title {
    text-align: center;
    letter-spacing:2px;
    margin-top: 30px; 
    float:left;
    margin-bottom: 5px; 
    
}

.ido {
    color:black; 
    text-align:center;
    margin-top: 0px; 
    margin-bottom: 0px; 
    float:left;
}

.texty {
    text-align: center;
    color: black;
    font-weight: bolder;
    opacity: 1;
    float:left;
}


#special {
   color: #00AAFF ;
}

.box {
    width: 500px;
    height: 500px;
    background-color: rgba(12, 112, 242, 0.5); /* 반투명한 파란색 */
    padding: 20px;
    box-shadow: 0 0 0 5px rgba(1, 1, 0, 0.5);
    border-radius: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    float:left;
}

 

 

시행착오 끝에 성공은 하긴 했으나.. \

 

순정 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="blog-content">
            <img src="source/Myselfie.jpeg" class="blog-profile">
            <div class="blog-name">
                <h4 style="margin: 8px">insidepixce</h4>
                <p style="margin: 8px">1시간 전</p>
            </div>
            <div class="blog-name">
                <h4>블로그글</h4>
                <p>우리의 미래는 찬란히 빛날거야</p> 
            </div>
        </div>
    <div class="blog-img">
        <img src="source/Myselfie.jpeg" width="100%">
    </div>
</div>
</body>
</html>
.container {
    width:800px;
    color: black;
    float:left;
}

.blog-content{
    width: 80%;
    height: 200px;
    background: #eee;
    float:left;
}

.blog-img {
    width: 20%;
    height:200px;
    background:yellow;
    float:left;
}

.blog-name {
    width: 70%;
    height: 50px;
    background: #eee;
    float:left;
}

.blog-profile{
    width:50Px;
    float:left;
}

728x90
300x250
728x90
728x90

1.Html 안에 글 입력하기

Html <body> 안에 원하는대로 글을 입력해도 좋지만, 태그를 입력하면 속성을 설정할 수 있다

  • <p>태그
<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다</p>
</body>  
 </html>

 

<p> 는 paragraph의 약자로, 일반 글을 적고 싶으면 이를 사용하면 된다

  • <h> 태그
<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다</p>
</body>  
 </html>

이렇게 <h> 태그를 사용하였을때 제목이 좀 더 커진것을 볼 수 있다

이런 식으로 h1~h6까지 있는데 입맛에 맞게 사용하면 된다

글을 적고 싶으면 h와 p중 하나를 사용할 수 있다.


2. Html의 주요 태그들

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
<p>우리의 찬란한 일기(본문)</p>
<h1>오늘의 노력은 빛을 발할 거야</h1>
<img src="Myselfie.jpeg"
style="width:100px; height:100px;"> 
<button>버튼인데</button>
<a href= "https://google.com"> 구글로 가는 법</a>
<ul>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ul>
<ol>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ol>
</body>

 

  • ol과 ul 의 차이

→ <ol> 은 리스트에 숫자를 붙여서 보여준다

→ <ul> 은 리스트에 동그라미를 붙여서 보여준다

3. 이미지 누르면 구글로 이동하게 하는 법

<a href = "https://naver.com">
    <img src="Myselfie.jpeg"
    style="width:100px; height:100px;">

이렇게 하면 가능하다.

나같은 경우는 사진 크기가 너무 커서 100x100으로 바꿔주었다

이제 밑의 사진을 클릭하면 링크를 타고 이동한다. 네이버로 해보았다.

4. 숙제 (이동하기라는 글자를 누르면 네이버로 이동하게 하기)

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다 이동하기</p>
</body>  
 </html>

이 상황에서 이동하기만 눌렀을때 다른 링크로 이동하게 만들고 싶다면?

</head>  
<body>
<p>우리의 찬란한 일기(본문) <a href ="https://insidepixce.tistory.com/">이동하기</a></p>

 

나같은 경우에는 이렇게 만들어줬다.

이 상황에서 옆에 이동하기를 누르면 내 티스토리로 이동된다.

 

728x90
300x250

+ Recent posts