'html,css'에 해당되는 글 15건

  1. 2023.11.09 iframe
  2. 2023.11.07 table 과제
  3. 2023.11.07 table colgroup
  4. 2023.11.02 11/02, 7~9
  5. 2023.07.22 FullStack 상세화면/수정/삭제
  6. 2023.07.19 Fullstack 자동차 브랜드 검색 1
  7. 2023.07.18 movie list
  8. 2023.07.17 react + tailwind.css
  9. 2021.11.10 mydevice.io
  10. 2016.12.24 메인 페이지 디자인
2023. 11. 9. 16:19

iframe

html,css
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준 지원기술</title>
    <style>
        iframe { float: right; }
    </style>
</head>
<body>
    <iframe src="hesul.html" frameborder="0" width="250" height="150" name="term"></iframe>
    웹 표준지원기술에는 <a href="sr.html" target="term">스크린 리더</a>,
        <a href="sm.html" target="term">화면확대 기능</a>,
        <a href="ss.html" target="term">스피치 신서자이저</a> 등이 있다.
</body>
</html>

 

sr.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>스크린 리더</h1>
    <P>
        시각 장애인들에게 화면 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을 음성으로 알려주는 기능.
        출처: https://chlolisher.tistory.com/152 [클로리셔 작은 공간:티스토리]
    </P>
</body>
</html>

 

sm.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>화면확대</h1>
    <P>
        웹페이지의 모든 항목을 크게 또는 작게 하려면 확대/축소 옵션을 사용하세요.

컴퓨터에서 Chrome을 엽니다.
오른쪽 상단의 '더보기' 더보기를 클릭합니다.
'확대/축소' 옆에서 원하는 확대/축소 옵션을 선택합니다.
모든 항목 확대: '확대' 확대를 클릭합니다.
모든 항목 축소: '축소' 축소를 클릭합니다.
전체 화면 모드 사용: '전체 화면' 전체 화면을 클릭합니다.
다음과 같이 단축키를 사용하여 확대 또는 축소하는 방법도 있습니다.

모든 항목 확대:
Windows 및 Linux: Ctrl 및 + 키를 누릅니다.
Mac: ⌘ 및 + 키를 누릅니다.
Chrome OS: Ctrl 및 + 키를 누릅니다.
모든 항목 축소:
Windows 및 Linux: Ctrl 및 - 키를 누릅니다.
Mac: ⌘ 및 - 키를 누릅니다.
Chrome OS: Ctrl 및 - 키를 누릅니다.
전체 화면 모드 사용:
Windows 및 Linux: F11 키를 누릅니다.
Mac: ⌘ + Ctrl + f를 누릅니다.
Chrome OS: 키보드 상단의 전체 화면 키 전체화면를 누릅니다. 이 키는 F4라고도 합니다.
    </P>
</body>
</html>
저작자표시

'html,css' 카테고리의 다른 글

table 과제  (0) 2023.11.07
table colgroup  (0) 2023.11.07
11/02, 7~9  (0) 2023.11.02
FullStack 상세화면/수정/삭제  (0) 2023.07.22
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
Posted by 다만사
2023. 11. 7. 18:28

table 과제

html,css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
        }
        th, td {
            vertical-align: top;
        }
        h3 {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>THE HYPE BOx</h1>
    <h4>Can't-miss news and updates from accross the Mavel Universe!</h4>
    <table>
        <tr>
            <td><img src="marvel1.png" alt=""></td>
            <td>
                <h3>TV Shows</h3>
                <p>'Loki': Designing O.B's New Wrokspace in Episode 5</p>
            </td>
        </tr>
        <tr>
            <td><img src="marvel2.png" alt=""></td>
            <td>
                <h3>Podcasts</h3>
                <p>The 'Women of Marvel' Guide to Carol Danvers. AKA Captain Marvel</p>
            </td>
        </tr>
        <tr>
            <td><img src="marvel3.png" alt=""></td>
            <td>
                <h3>Comics</h3>
                <p>Kieron Gillen and Luca Maresca's 'X-Men: Forever' Unravels the Final Mysteries of the Krakoa Era</p>
            </td>
        </tr>
    </table>
</body>
</html>
저작자표시

'html,css' 카테고리의 다른 글

iframe  (0) 2023.11.09
table colgroup  (0) 2023.11.07
11/02, 7~9  (0) 2023.11.02
FullStack 상세화면/수정/삭제  (0) 2023.07.22
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
Posted by 다만사
2023. 11. 7. 14:41

table colgroup

html,css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>열 그룹화</title>
    <style>
        table, th, td { border: 1px solid; }
        colgroup#dateplace {
            background-color: #33bbff;
            width: 200px;
        }
        colgroup#count {
            width: 100px;
        }
        th, td { padding: 0.3em 0.6em; }
        td:nth-child(n + 3) { text-align: right; }
    </style>
</head>
<body>
    <table>
        <caption>2023년 낚시 결과(마리)</caption>
        <colgroup span="2" id="dateplace"></colgroup>
        <colgroup span="3" id="count"></colgroup>
        <tr>
            <th>날짜</th>
            <th>장소</th>
            <th>고등어</th>
            <th>참치</th>
            <th>꽁치</th>
        </tr>
        <tr>
            <td>2월01일</td>
            <td>목포항</td>
            <td>0</td>
            <td>0</td>
            <td>12</td>
        </tr>
        <tr>
            <td>2월15일</td>
            <td>군산항</td>
            <td>2</td>
            <td>0</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2월26일</td>
            <td>인천항</td>
            <td>4</td>
            <td>2</td>
            <td>23</td>
        </tr>
        <tr>
            <td>2월27일</td>
            <td>인천항</td>
            <td>7</td>
            <td>0</td>
            <td>13</td>
        </tr>
        <tr>
            <td>3월04일</td>
            <td>군산항</td>
            <td>0</td>
            <td>3</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3월07일</td>
            <td>목포항</td>
            <td>3</td>
            <td>0</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>
저작자표시

'html,css' 카테고리의 다른 글

iframe  (0) 2023.11.09
table 과제  (0) 2023.11.07
11/02, 7~9  (0) 2023.11.02
FullStack 상세화면/수정/삭제  (0) 2023.07.22
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
Posted by 다만사
2023. 11. 2. 14:38

11/02, 7~9

html,css

=====================

aside

nav

header, main, footer

프레이징 태그

small

div id

hr

======================

ul, li

ol, li

ol type

ol start, value

dl, dt, dd

=======================

a href

#id

url#id

target

 

11/7~9

table

caption

colspan, rowspan

thead, tbody, tfoot

colgroup

col

======================

form

form, label, input

input type="submit"

input type="reset"

input type="button"

input type="image"

button type="submit"

=====================

input type="text"

textarea

input type="password"

input type="hidden"

input type="radio"

input type="checkbox"

select, option

optgroup

select size="5"

input type="file"

fieldset, legend

======================

script

iframe

figure, figcaption

 

 

 

 

 

저작자표시

'html,css' 카테고리의 다른 글

table 과제  (0) 2023.11.07
table colgroup  (0) 2023.11.07
FullStack 상세화면/수정/삭제  (0) 2023.07.22
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
movie list  (0) 2023.07.18
Posted by 다만사
2023. 7. 22. 23:25

FullStack 상세화면/수정/삭제

html,css

Car.js

 

import {useState, useEffect} from 'react'
import {useParams, useNavigate} from "react-router-dom"
import Layout from '../components/Layout';
import FormInput from '../components/FormInput';

let BASE_URL = "http://localhost:8000/car/"

const Car = () => {
    let {id} = useParams()
    const navigate = useNavigate()

    const [car, setCar] = useState(null)
    const [price, setPrice] = useState(null)
    const [error, setError] = useState([])

    const getCar = async() => {
        const res = await fetch(`${BASE_URL}${id}`)
        if (!res.ok) {
            setError(["Error fetching car"])
        } else {
            const data = await res.json()
            setCar(data)
        }
    }

    const onChange = (event)=>{
        setPrice(event.target.value)
    }

    const updatePrice = async() => {
        const res = await fetch(`${BASE_URL}${id}`,{
            method: "PUT",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({price})
        })

        const data = await res.json()
        if (!res.ok) {
            alert("수정 에러!")
        }else {
            alert("가격 수정이 완료되었습니다!")
            getCar()
        }
    }

    const handleDelete = async () => {
        const res = await fetch(`${BASE_URL}${id}`,{
            method: "DELETE",
            headers: {
                'Content-Type': 'application/json'
            }
        })

        if (!res.ok) {
            alert("삭제 에러!")
        }else {
            alert("삭제가 완료되었습니다!")
            navigate("/cars")
        }

    }

    useEffect(()=>{
        getCar()
    },[])

    return (
        <Layout>
            {error && <ul className="flex flex-col mx-auto text-center">
            { error && error.map(
                (el, index)=>(                            
                    <li key={index} className="my-2 p-1 border-2 border-red-700 max-w-md mx-auto">{el}</li>
                    )
                )
            }      
        </ul>}
        {car&&<div>              
            <div className="flex flex-col justify-between min-h-full items-center">
                <div className="font-bold text-xl text-gray-600 my-3">
                    {car.brand} {car.make}
                </div>              
       
                <div className="flex flex-col items-center font-normal text-lg">
                    <div>Price: <span className="font-semibold text-orange-600 text-xl">{car.price}</span></div>
                    <div>Year: {car.year}</div>
                    <div>Km: {car.km}</div>
                </div>
            </div></div>}

            <div className="flex flex-row">
                 
                    <FormInput
                            label='change price'
                            placeholder={price}
                            type="number"
                            value={price}
                            onChange={onChange}
                            required />
                   
                    <button
                        onClick={updatePrice}
                        className="bg-yellow-500 text-white p-2 rounded-md m-3 transition-opacity hover:opacity-80">
                            Edit price
                    </button>
                    <button
                        onClick={handleDelete}
                        className="bg-red-700 text-white p-2 rounded-md m-3 transition-opacity hover:opacity-80">
                            Delete Car
                    </button>        
                </div>
        </Layout>
    )
}

export default Car

 

 

car.py

 

from fastapi import FastAPI, Body, HTTPException, status

from typing import Dict, List

from decouple import config
from fastapi.encoders import jsonable_encoder
from fastapi.responses import JSONResponse
from motor.motor_asyncio import AsyncIOMotorClient

from bson import ObjectId

from fastapi.middleware.cors import CORSMiddleware

from models import CarBase, CarUpdate

origins = [
    "http://localhost:3000",
]



DB_URL = config('DB_URL', cast=str)
DB_NAME = config('DB_NAME', cast=str)

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins = origins,
    allow_credentials = True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.on_event("startup")
async def startup_db_client():
    app.mongodb_client = AsyncIOMotorClient(DB_URL)
    app.mongodb = app.mongodb_client[DB_NAME]

@app.on_event("shutdown")
async def shutdown_db_client():
    app.mongodb_client.close()


@app.get("/car/{id}")
async def root(id:str):
    if (car := await app.mongodb["cars"].find_one({"_id": ObjectId(id)})) is not None:
        return get_ids(car)
    raise HTTPException(status_code=404, detail=f"Car with {id} not found")
    # car = await app.mongodb["cars"].find_one({"_id": ObjectId(id)})
    # # print(car)
    # return get_ids(car)

@app.get("/cars/price")
async def cars_by_price(min_price:int=0, max_price:int=100000):
    list = app.mongodb["cars"].find({
        "$and": [{"price":{"$gte": min_price}},{"price":{"$lte": max_price}}]  
    })
    result = [get_ids(car) async for car in list]
    return result

@app.get("/cars")
async def list_all_cars(
    min_price: int=0,
    max_price: int=100000,
    brand:str=None,
    page:int=1):

    RESULT_PER_PAGE = 25
    skip = (page - 1) * RESULT_PER_PAGE

    query = {"price": {"$lte":max_price, "$gte":min_price}}
    if brand:
        query["brand"] = brand

    list = app.mongodb["cars"].find(query).sort("_id", -1).skip(skip).limit(RESULT_PER_PAGE)
    result = [get_ids(car) async for car in list]
    return result

def get_ids(car: Dict) -> Dict:
    # print(car)
    id = car["_id"]
    car["_id"] = str(id)
    return car


@app.post("/cars")
async def new_car(car: CarBase = Body(...)):
    # print(car)
    car = jsonable_encoder(car)
    new_car = await app.mongodb["cars"].insert_one(car)
    # print(new_car)
    # print(new_car.inserted_id)
    created_car = await app.mongodb["cars"].find_one({"_id": ObjectId(new_car.inserted_id)})
    #return {"message": "new_car created"}
    return JSONResponse(status_code=status.HTTP_201_CREATED, content=get_ids(created_car))

@app.put("/car/{id}")
async def update_car(id: str, car: CarUpdate = Body(...)):
    print(car.model_dump())
    await app.mongodb["cars"].update_one(
        {"_id": ObjectId(id)}, {"$set": car.model_dump()}
    )

    if (car := await app.mongodb["cars"].find_one({"_id": ObjectId(id)})) is not None:
        return get_ids(car)
    raise HTTPException(status_code=404, detail=f"Car with {id} not found")

@app.delete("/car/{id}")
async def delete_car(id: str):
    delete_result = await app.mongodb["cars"].delete_one({"_id": ObjectId(id)})

    if (delete_result.deleted_count == 1):
        return JSONResponse(status_code=status.HTTP_204_NO_CONTENT, content=None)
   
    raise HTTPException(status_code=404, detail=f"Car with {id} not found")


저작자표시

'html,css' 카테고리의 다른 글

table colgroup  (0) 2023.11.07
11/02, 7~9  (0) 2023.11.02
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
movie list  (0) 2023.07.18
react + tailwind.css  (0) 2023.07.17
Posted by 다만사
2023. 7. 19. 23:59

Fullstack 자동차 브랜드 검색

html,css

App.js

 

// import logo from './logo.svg';
// import './App.css';
import Header from "./components/Header";
import Card from "./components/Card";
import { useState, useEffect } from "react";
function App() {
  // let data = [
  //   {title:"Avengers", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2012},
  //   {title:"Avengers End game", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2019},
  //   {title:"Avengers Age of ultron", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2015},
  // ]

  const [cars, setCars] = useState([])
  const [brand, setBrand] = useState('')

  const handleChangeBrand = (ev) => {
    setCars([])
    setBrand(ev.target.value)
  }

  useEffect(()=>{
    fetch(`http://localhost:8000/cars?brand=${brand}`)
      .then(response=>response.json())
      .then(json=>{
        setCars(json)
      })
  },[brand])

  return (
    <div className="App">

      <Header />
      <h2 className="font-bold font-mono text-lg text-center my-4">Cars - {brand}</h2>
      <label htmlFor="cars">브랜드 선택:</label>
      <select name="cars" id="cars" onChange={handleChangeBrand}>
        <option value="">선택하세요</option>
        <option value="Hyundai">현대</option>
        <option value="Kia">기아</option>
        <option value="Toyota">도요타</option>
      </select>
      <div className="grid grid-cols-3 my-3 gap-3">
        {cars.map((el)=>{
          return <Card key={el._id} car = {el} />
        })}
      </div>
    </div>
  );
}

export default App;
 
Card.js
 
const Card = ({car}) => {
    //console.log(props)
    let {brand, price, make, year} = car
    return (
        <div className="shadow-md p-5 flex flex-col">
            <div className="font-extrabold text-center border-b-2">
                {make}
            </div>
            <div>Price: {price} Euro</div>
            <div>Brand: {brand}</div>
            <div>{year}년식</div>
        </div>
       
    )
}
export default Card

 

 

==================================

 

Backend

 

car.py

 

from fastapi import FastAPI, Body, HTTPException, status

from typing import Dict, List

from decouple import config
from fastapi.encoders import jsonable_encoder
from fastapi.responses import JSONResponse
from motor.motor_asyncio import AsyncIOMotorClient

from bson import ObjectId

from fastapi.middleware.cors import CORSMiddleware

origins = [
    "http://localhost:3000",
]



DB_URL = config('DB_URL', cast=str)
DB_NAME = config('DB_NAME', cast=str)

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins = origins,
    allow_credentials = True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.on_event("startup")
async def startup_db_client():
    app.mongodb_client = AsyncIOMotorClient(DB_URL)
    app.mongodb = app.mongodb_client[DB_NAME]

@app.on_event("shutdown")
async def shutdown_db_client():
    app.mongodb_client.close()


@app.get("/car/{id}")
async def root(id:str):
    # if (car := await app.mongodb["cars"].find_one({"_id": ObjectId(id)})) is not None:
    #     return car
    # raise HTTPException(status_code=404, detail=f"Car with {id} not found")
    car = await app.mongodb["cars"].find_one({"_id": ObjectId(id)})
    # print(car)
    return get_ids(car)

@app.get("/cars/price")
async def cars_by_price(min_price:int=0, max_price:int=100000):
    list = app.mongodb["cars"].find({
        "$and": [{"price":{"$gte": min_price}},{"price":{"$lte": max_price}}]  
    })
    result = [get_ids(car) async for car in list]
    return result

@app.get("/cars")
async def cars_by_brand(brand:str):
    list = app.mongodb["cars"].find({
        "brand": brand
    })
    result = [get_ids(car) async for car in list]
    return result

def get_ids(car: Dict) -> Dict:
    # print(car)
    id = car["_id"]
    car["_id"] = str(id)
    return car


@app.post("/cars")
async def new_car(car: Dict = Body(...)):
    # print(car)
    car = jsonable_encoder(car)
    new_car = await app.mongodb["cars"].insert_one(car)
    # print(new_car)
    # print(new_car.inserted_id)
    created_car = await app.mongodb["cars"].find_one({"_id": ObjectId(new_car.inserted_id)})
    #return {"message": "new_car created"}
    return JSONResponse(status_code=status.HTTP_201_CREATED, content=get_ids(created_car))
저작자표시

'html,css' 카테고리의 다른 글

11/02, 7~9  (0) 2023.11.02
FullStack 상세화면/수정/삭제  (0) 2023.07.22
movie list  (0) 2023.07.18
react + tailwind.css  (0) 2023.07.17
mydevice.io  (0) 2021.11.10
Posted by 다만사
2023. 7. 18. 00:02

movie list

html,css
// import logo from './logo.svg';
// import './App.css';
import Header from "./components/Header";
import Card from "./components/Card";
function App() {
  let data = [
    {title:"Avengers", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2012},
    {title:"Avengers End game", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2019},
    {title:"Avengers Age of ultron", cast: "Robert Downey Jr, Chris Evans, Mark Ruffalo", year: 2015},
  ]

  return (
    <div className="App">

      <Header />
      <div className="grid grid-cols-3 my-3 gap-3">
        {data.map((el)=>{
          return <Card key={el.id} movie = {el} />
        })}
      </div>
    </div>
  );
}

export default App;
저작자표시

'html,css' 카테고리의 다른 글

FullStack 상세화면/수정/삭제  (0) 2023.07.22
Fullstack 자동차 브랜드 검색  (1) 2023.07.19
react + tailwind.css  (0) 2023.07.17
mydevice.io  (0) 2021.11.10
메인 페이지 디자인  (0) 2016.12.24
Posted by 다만사
2023. 7. 17. 23:40

react + tailwind.css

html,css

css를 작성할 필요가 없는 tailwind.css

인생영화 작성...

// import logo from './logo.svg';
// import './App.css';

function App() {
  let data = ["Avengers", "Spiderman", "Infinity War", "End game"]

  return (
    <div className="App">
      <h1 className="bg-slate-500 text-white text-center">
        This is a Tailwind styled site!
      </h1>
      <div>
        {data.map((el)=>{
          return <div>인생영화 : <span className="font-bold">{el}</span></div>
        })}
      </div>
    </div>
  );
}

export default App;
저작자표시

'html,css' 카테고리의 다른 글

Fullstack 자동차 브랜드 검색  (1) 2023.07.19
movie list  (0) 2023.07.18
mydevice.io  (0) 2021.11.10
메인 페이지 디자인  (0) 2016.12.24
인덱스 페이지 작성  (0) 2016.12.24
Posted by 다만사
2021. 11. 10. 11:32

mydevice.io

html,css

모바일 웹/앱을 작성하다보면 다양한 기기 크기에 맞추는 것이 정말 힘들다는 것을 실감한다.

그럴경우 디바이스 정보를 알 수 있는 사이트가 있다.

바로 mydevice.io 이다.

주소는 https://www.mydevice.io 이다.

'html,css' 카테고리의 다른 글

movie list  (0) 2023.07.18
react + tailwind.css  (0) 2023.07.17
메인 페이지 디자인  (0) 2016.12.24
인덱스 페이지 작성  (0) 2016.12.24
헤더와 어사이드에 링크 추가  (0) 2016.12.23
Posted by 다만사
2016. 12. 24. 14:25

메인 페이지 디자인

html,css

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>DDONGFONE</title>

<link rel="stylesheet" href="style.css">

</head>

<body id="top">


<header>

<h1><a href="index.html"><img src="logo.gif" alt="">ddongfone</a></h1>

<nav>

<ul>

<li><a href="index.html">홈</a></li>

<li><a href="news.html">공지사항</a></li>

<li><a href="about.html">폰값똥값에 관해</a></li>

<li><a href="contact.html">문의</a></li>

</ul>

</nav>

</header>


<section>

<div id="photo">

<h1>폰값똥값</h1>


<p>국내 최대의 중고폰 쇼핑몰 폰값똥값입니다.</p>


<a href="news.html">알립니다...</a>

</div>


<p id="message">안녕하십니까 저희 쇼핑몰(폰값똥값)을 방문해주신 고객여러분을 환영합니다!

 저희 폰값똥값의 제작 취지는 양질의 스마트폰을 저렴한 가격으로 고객분들께 공급하고자 만든 쇼핑몰 입니다.

 현재 스마트폰을 만들어 파는 제조사나, 통신을 판매하는 통신사의 스마트폰 요금은 요금이나 단말기 가격에 엄청난 거품이 끼어있습니다.

 저희는 그 불편한 현실에 대해서 해결할수 있는 대안을 만들어 드릴수 있을 것 같아 쇼핑몰을 오픈하게됐습니다.

 저희 폰값똥값은 홍콩에 지사를 두고 , 한국내에서 스마트폰을 매입하고 있는 ㈜트러스트의 쇼핑몰 입니다.</p>


</section>


<footer>

<small>Copyright &copy; 폰값똥값, all rights reserved.</small>

</footer>

</body>

</html>


css

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);


body {font-family: 돋움,Dotum,sans-serif;

background-color: #edede3;

background-image: url(back.png);

margin: 0;}


h1 {font-size:38px;

margin-top: 0;

margin-bottom: 0}


p {line-height: 1.5}


/* 헤더 */

header {background-color: #ffffff;

border-bottom: solid 1px #aaaaaa;

margin-bottom: 30px;

-webkit-box-shadow: 0 1px 7px #aaaaaa;

box-shadow: 0 1px 7px #aaaaaa;

padding: 5px;}


header h1 {font-family: 'Open Sans Condensed', sans-serif;

font-size: 24px;

width: 900px;

margin-left: auto;

margin-right: auto}

header h1 a {text-decoration: none;

color: #000000}


header h1 a:hover {color: #000000}


header h1 img {vertical-align: -10px;

margin-right: 5px}


/* 기사 */

article {background-color: #ffffff;

width: 900px;

margin-left: auto;

margin-right: auto;

border: solid 1px #aaaaaa;

padding: 30px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

margin-bottom: 15px;

-webkit-box-shadow: 1px 1px 3px #aaaaaa;

box-shadow: 1px 1px 3px #aaaaaa;

border-radius: 20px;

overflow: hidden}


/* 풋터 */

footer {width: 900px;

margin-left: auto;

margin-right: auto;

clear: both}

/* 이미지를 중앙에 배치하는 레이아웃 */

figure.photo-center {text-align: center;

margin-top: 30px;

margin-bottom: 30px}

/* 이미지를 왼쪽에 배치하는 레이아웃 */

figure.photo-left {margin: 0;

margin-right: 20px;

float: left}

figure.photo-left img {width: 300px}


/* 이미지를 오른쪽에 배치하는 레이아웃 */

figure.photo-right {margin: 0;

margin-left: 20px;

float: right}

figure.photo-right img {width: 300px}


/* 소제목 */

h2 {clear:both;

border-bottom: solid 5px #c39f4a;

margin-top: 30px}


/* 링크 */

a {color: #b77d3c}

a:hover {color:#ff8800}

a img {border: none}


/* 관련 기사 링크 */

aside {border: solid 2px #d6c588;

border-radius: 5px;

padding: 10px;

background-color: #edede3;

margin-top: 40px}

aside h1 {font-family: 'Open Sans Condensed', sans-serif;

font-size: 18px;

color: #c39f4a;

border-bottom: dotted 1px #c39f4a}

aside ul {list-style-image: url(listmark.png)}


aside a{color: #000000;

text-decoration: none}

/* 내비게이션 */

nav ul {list-style-type: none;

margin-top: 0;

margin-bottom: 0;

padding-left: 0;

font-size: 0}

nav li {

display: inline;

font-size: 12px;

border-right: solid 1px #aaaaaa;

padding-left: 10px;

padding-right: 10px;

}


nav li:first-child {border-left: solid 1px #aaaaaa}


nav {

width: 900px;

margin-left: auto;

margin-right: auto;

text-align: right;

margin-top: -27px;

margin-bottom: 10px;

}


nav a {color: #000000;

text-decoration: none}


/* 기사 일람 페이지 */

#posts article img {float: left;

margin-right: 20px}

#posts article h1 {font-size: 24px}


#posts section{width: 900px;

margin-left: auto;

margin-right: auto}


#posts header {margin-bottom: 20px}


#posts time {font-size: 12px;

color: #ffffff;

background-color: #bdbc8f;

border-radius: 10px;

padding: 2px 20px 2px 20px}

#posts article a {color: #000000;

text-decoration: none;

display: block;

overflow: hidden;

padding: 20px}


#posts article a:hover {background-color: #ffe792}


#posts article {padding: 0}


/* 메인 페이지 */

#top header {margin-bottom: 0}


#photo {background-image: url(smartphones.jpg);

background-repeat: no-repeat;

background-position: 50% 0;

background-color: #3f8ad6;

text-align: center;

padding-top: 320px;

padding-bottom: 80px}

#photo h1 {font-family: 'Open Sans Condensed', sans-serif;

font-size: 60px;

color: #ffffff;

text-shadow: 0 5px 10px #000000;

}


#photo p {color: #ffffff;

font-size: 20px;

font-weight: bold;

text-shadow: 0 5px 10px #000000;

margin-top: 0px}

#photo a {background-color: #ffaa00;

background-image: -webkit-gradient(

linear,

left top, left bottom,

from(#ffe7b8),

to(#ffaa00));

background-image: -webkit-linear-gradient(

top, #ffe7b8 0%,

#ffaa00 100%);

background-image: linear-gradient(

to bottom,

#ffe7b8 0%,

#ffaa00 100%);

padding: 10px 80px;

border-radius: 10px;

color: #000000;

font-weight: bold;

text-decoration: none;

}



'html,css' 카테고리의 다른 글

react + tailwind.css  (0) 2023.07.17
mydevice.io  (0) 2021.11.10
인덱스 페이지 작성  (0) 2016.12.24
헤더와 어사이드에 링크 추가  (0) 2016.12.23
이미지가 있는 페이지 작성  (0) 2016.12.21
Posted by 다만사

티스토리툴바