목록웹개발 (3)
판봉 개발 일기
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bz3qqO/btraBTdmyHm/SI5FqAbeVCZXtT2BBSSLZK/img.png)
위 사진은 float를 썼던 기존 코드를 갈아 엎고 flex box 형식으로 되게끔 다시 다 만든 것 입니다. 원래는 이러 했습니다. 오른쪽에 2열로 광고 배너가 있습니다. 메뉴 안내 표시가 왼쪽에 따라오고 본문을 기준으로 오른쪽에는 광고 배너가 있고, 상단에는 큰 배너 광고가 있습니다. 구현 코드👇👇 더보기 10분안에 완성하는 초간단 요리! https://www.rocketpunch.com/" target="_blank"> 신라면 볶음밥 5분 육포 달걀 마요 비빔면 https://www.10000recipe.com/recipe/6938659" target="_blank">신라면 볶음밥 혼자사는 자취생들! 오늘 점심은 신라면 볶음밥 완전추천! 재료 목록 재료 용량 신라면 1개 달걀 1개 식용유 약간 밥 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cbNcYk/btrai7cgwLq/IYI91DYhbmhkrJzDiqbk81/img.png)
오늘은 CSS의 의사 클래스인 구조, 문자 선택자에 대하여 알아 보겠습니다. 먼저 의사 클래스란 무엇이나면 가짜, 같은 역할을 하는 비슷한 이라는 의미로 흔히 말하는 [짝퉁]의 개념이라고 보시면 될것같습니다. 물론 짝퉁도 엄연히 그 물건의 용도를 하고 있습니다. 의사 클래스의 구조 선택자에는 다음과 같은 3가지의 선택자가 존재합니다. (많이 쓰는것 3가리를 꼽은 것) :first-child - 형제 관계 중에서 첫번째에 위치하는 태그를 선택 - 선택자와 같은 레벨의 요소들 중 첫번째 요소를 선택 :last-child - 형제 관계 중에서 마지막에 위치하는 태그를 선택 :nth-child(수열) - 형제 관계 중에서 앞에서 수열 번째에 태그를 선택 - 예) 1, 3, 5, 7, 9 => 2n+1=> nth..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/MpfjT/btq91N6kw6T/krbYKPPgwg3YzZ2kcAAX9k/img.png)
오늘은 글자 태그, 테이블 태그, 공간 분할 태그를 배웠습니다. 글자태그들은 주로 이렇게 이루어져 있습니다. 글자 태그 , : 굵은 글자 태그 , : 기울어진 글자 태그 작은 글자 태그 : 아래에 달라 붙는 글자 태그 : 위에 달라 붙는 글자 태그 : 밑줄 글자 태그 가운데 줄이 그어진 글자태그 보시면 재료의 글씨가 진한걸 볼 수 있습니다. 수량의 글씨는 옆으로 기울어져 있습니다. 해당 태그는 각각 과 을 쓴 것인데 두 태그는 다른 태그들과 다르게 시맨틱 태그입니다. 한마디로 의미를 가지고 있는 것이죠. 테이블 태그 이번엔 테이블 태그에 대해 알아보겠습니다. : 표 내부의 행 태그, table row : 행 내부의 제목 셀 태그, table header : 행 내부의 일반 셀 태그, table data ..