Today 요약

1. 모바일 반응형 웹 강의
2. CSS 스타일링

1. What I did?

1.1 모바일 반응형 웹 강의

오늘 추가적으로 다시 복습하면서 이해한 부분은 제공되어 있는 서버 api소스를 가지고 제대로 통신할 수 있도록 파이썬 코드를 잘 설정하고 그걸 프론트에서 fetch로 잘 받아와서 제대로 된 데이터를 웹 페이지에 렌더링 하는 것까지를 다시 한 번 시도해보았다. 만약 이제 적절한 백엔드 서버 코드가 주어진다면 그걸 잘 받아와서 적절하게 렌더링 해주는 부분은 어느 정도 잘 진행할 수 있을 것 같다.

const listingNow = () => {
  fetch('/now')
    .then((res) => res.json())
    .then((data) => {
      data.forEach((item) => {
        let image = item['image']
        let period = item['period']
        let title = item['title']
        let url = item['url']

        let temp_html = `<div class="card"token interpolation">${url}')">
                          <div class="card-image" style="background-image: url('${image}');"></div>
                          <span class="card-title">${title}</span>
                          <span class="period">${period}</span>
                        </div>`

        $('#card-now').append(temp_html)
      })
    })
}

@app.route('/now', methods=["GET"])
def get_now():
    url = 'https://korean.visitseoul.net/exhibition'

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url, headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')

    items = soup.select('.item > a')
    base = 'https://korean.visitseoul.net'

    docs = []
    for item in items:
        url = base+item['href']
        image = base+item.select_one('.thumb')['style'].split('(')[1].replace(')','')
        title = item.select_one('.title').text
        period = item.select_one('.small-text.text-dot-d').text.strip()
        doc = {
            'url':url,
            'image':image,
            'title':title,
            'period':period
        }
        docs.append(doc)
    
    return docs

2. What I Learned?

2.1 CSS 스타일링

• css로 이미지 적용하기

<div class="bg">
  <h1 class="title">타이틀</h1>
  <div class="main-image"></div>
</div>

.bg {
  width: 100%;
  height: 420px;
  background-color: #d7d8da;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
}

.main-image {
  width: 790px;
  height: 420px;
  background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/pirates/web/lv2/header-image.png');
  background-position: center;
  background-size: cover;
}

h1 {
  position: absolute;
  color: white;
  left: 25%;
  top: 50px;
}

전체적인 크기나 높이를 외부 div 태그에서 설정하고 그 아래 div태그를 하나 더 선언해서 그곳에 이미지를 설정한다. 이렇게 css로 넣는 방법과 div를 하나 만들고 그 안에 img 태그를 넣어서 하는 방식과 둘 중에 편한 방법을 사용하면 될 것 같다. 아무튼 그렇게 이미지를 넣고 중간에 위치시키고 cover로 채우고 외부 div 태그에서 display: flex로 이미지를 전체 배경에서 봤을 때 중간으로 위치시킬 수 있도록 하는 코드다.

• border radius를 적용해도 이미지가 튀어나와서 적용이 안되는 것 처럼 보일 때

card라는 클래스를 가진 div 태그 안에 이미지가 들어있는데, card에 border-radius를 적용해도 이미지의 크기 때문에 적용이 안되는 것처럼 보일 때 card 태그에 overflow: hidden 속성을 적용해서 이미지가 넘쳐보이는 부분을 숨김으로써 해결할 수 있다.