대구AI스쿨

html 기본 틀head의 내용은 페이지에 표시되지 않는 대신 metadata를 포함하는 역할을 한다.body는 브라우저에 실질적으로 표시되는 내용.head위는 head 사이에 들어갈 내용.charset에서 문자 인코딩을 선언하고,name은 일반 주석과 같이 직접 드러

main 태그는 explorer에서 적용되지 않아 role="main" 기능을 추가로 입력해줘야된다.(다만, 윈11이 상용화 되면 explorer가 없어져 신경 쓰지 않아도 될 것 같다.)article, selection 태그는 영역을 나타내는 title 정보가 있어야

어려웠던 점 해결 방법 학습 소감 진행한 코드 링크

닷홈에서 계정을 만들고, 아래 무료 호스팅을 이용해 무료 도메인을 만들 수 있다.무료 도메인이기 때문에 기간이 짧고, 용량이 작은 등 기능이 많이 제한된다.실습해본 도메인은 여기이다.content로 생성된 문자는 html에서 글자로 취급되지 않아 아래와 같이 드래그로

주석을 원하는 줄 끝에서 ctrl+/ 을 누르면 그 줄 전체 주석 처리/해제가 된다. html, css 모두 적용가능. 다만 html은 그 줄 주석 처리 할 일이 잘 없다.대신 원하는 영역을 드래그한 후, ctrl+/로 주석 처리도 가능. 영역 구분이 모호할 경우 해제

레이아웃 2일차 position: absolute 두개의 형제 태그가 모두 absolute 위치를 가지면 나중에 정의된 태그가 맨 위로 온다. 이 때, z-index를 정해주면 높이값을 정해줄 수 있다. > 첫 형제 태그가 3차원이고, 두 번째 태그가 2차원이면

강의 시청을 시작할 때 2일차에 3일차 분량까지 전부 진행했다는 걸 깨달았다.어차피 아직 잘 이해가 가지 않으니 두 번 공부한다 생각하고 한 번 더 공부한 후 작성한다.메뉴 버튼 - 카카오 - 네이버 html 을 천천히 다시 뜯어보겠다.잘 보면 네이버 버튼만 파란색인데

transform: rotate(45deg) 시계방향으로 45도 회전transform: scale(2,3) 가로 두배, 세로 세배transform: skew(-10deg, 20deg) x축을 따라 -10도 기울이기, y축을 따라 20도 기울이기skewX, skewY로

Animate.csscodepenAnimate.css 에서 애니메이션에 관련된 약 4천줄의 css파일을 사용할 수 있고, 로 css 파일을 링크할 경우 animate\_\_animated 클래스와 애니메이션에 관련된 클래스, 속도 등에 관련된 유틸리티 클래스를 선언하기

오늘날, 예전과는 달리 여러가지 기기로 웹 사이트에 접속하기 때문에 사이트를 해당 기기의 해상도에 맞게 반응형으로 만들게 된다. 접속하는 기기에 따라 특정한 css 스타일을 사용하도록 만들어주는 모듈이 미디어쿼리다. css-tricks 에서 미디어쿼리와 관련된 코드를

미디어쿼리를 적용하는 방법이 3가지 있다.css 파일 하나에 기기에 대응하는 미디어쿼리 설정을 여러개 만든다.기기에 대응하는 css파일을 하나씩 만들어 여러개 링크를 시킨다.head 태그내에 따로 미디어 쿼리 설정을 만든다.다만 이 방법은 유용하지 않아 잘 쓰지 않는

지금껏 배운 html 속성을 모두 이용하여 KidsGao 레이아웃을 따라하는 실습이다. 금일 코드는 너무 길어 최하단에 링크해두었고, 특별히 어려웠던 부분만 짚어 나가겠다.css 코드가 길어 style.css, animation.css, mobile.css 로 나누어

원본 html 코드의 가장 상위 div 태그의 id로 목차를 나누자면intro, farm1, farm2, farm3 까지 1일차,forest1, forest2, forest3, science, night1까지 2일차,night2, morning, kitchen, col

키즈가오 3일차 시작하기 전에 코드가 마찬가지로 길다. 영상을 보면서 코드를 쓰는건 받아쓰기 밖에 되지 않으니 영상을 보면서 유념할 부분만 정리해두고, 전체 코드는 따로 링크해 두었다. 에니메이션 효과 > 레이아웃 팁 자식 레이아웃의 위치 속성을 아직 정하지

키즈가오 예제보다는 짧지만, 마찬가지로 코드가 길어 자세히 정리하긴 어려우니 하단의 링크로 대체하고 유념할 부분만 정리하였다.y축 중앙정렬 팁물론 다른 방법이 있을 순 있지만, 이 4줄로 y축 방향 기준으로 중앙정렬이 손쉽게 가능하니 외워두도록 하자.상위 태그와 하위

개발자를 위한 28가지 크롬 확장 프로그램 에서 CSSViewer : 검사 기능을 쓰지 않고 css 구성 속성을 바로 띄우는 프로그램.Lorem Ipsum Generator : 더미 텍스트를 만드는 프로그램.(큰 효용은 잘 모르겠다)Wappalyzer : 페이지 구성

대부분은 여태 다뤄본 레이아웃 방식이라 생소한 부분 몇개만 찾아 적어본다.\`content: ""; : 보통은 잘 쓰지 않지만 :before나 :after로 앞뒤에 추가 서식을 넣을 공간을 만들 경우에 사용한다. 아래에서는 background-color와 공간 크기를

코드는 아래 github 링크에 첨부하고, 유념할 부분만 따로 정리하였다.자식 레이아웃들에 같은 속성을 줄 때, 부모 레이아웃에 속성을 주면 모두 적용된다.위의 코드 대신 아래의 코드를 쓸 수 있다. 해당 코드는 코드가 되려 늘어났지만, 다양한 속성이 있을 수록 코드를

코드는 아래 github 링크에 첨부하고, 유념할 부분만 따로 정리하였다.원형 레이아웃 삽입레이아웃 모양을 정사각형으로 하고 border-radius: 50%속성을 주면 꼭지점 모양이 원형, 반지름의 크기가 한면의 50%로 설정되어 원형의 레이아웃이 된다.오버레이아래의

전과 마찬가지로 유념할 부분만 정리한다.길이 속성에 상대값과 절대값을 혼합필요에 따라 상대값과 절대값을 더하거나 빼는 방식으로 혼합해서 쓸 수 있다. 컨텐츠가 글자일 경우 폭의 경우엔 상위 레이아웃이 지정되지 않아도 되나 높이의 경우엔 상위 레이아웃의 크기가 정해져야한

(참고 : https://comic.naver.com/webtoon/weekday)전과 마찬가지로 유념할 부분만 정리한다.전체 레이아웃지난 시간에 만든 webtoon-header레이아웃과 오늘 만든 webtoon-main-right, webtoon-footer

전과 마찬가지로 유념할 부분만 정리한다.justify-content: space-between한 번쯤 다뤄본 것 같은데 잘 기억이 나지 않으니 다시 정리해 둔다.justify-content는 메인 축 방향으로 정렬하는 속성으로, 세부 옵션은 다음과 같다.flex-sta

전과 마찬가지로 유념할 부분만 정리한다.4방향 속성 생략언젠가 봤던 거 같지만 생소하게 느껴져 다시 적어본다.margin, padding와 같이 4방향 속성을 작성하는 경우 1~3개만 정할 수도 있다.4개의 속성값을 정하면 top, right, bottom, left

계속 아는 코드를 다시 쓰고 있으니 코드 보단 레이아웃 구성을 알아보기로 했다.네이버 뉴스 메인 페이지는 대략 위의 레이아웃으로 나뉘어있다. 다만 페이지를 열어두다 보면 자동으로 새로고침되거나 바뀌는 컨텐츠가 있는데, 이는 JavaScript로 실행된다. 카피캣 연습에

글자 숨김처리해당 레이아웃은 길이 제한을(max-width: 100%;) 두고 초과하는 글자는 숨기고(overflow: hidden;) 한 줄을 벗어나지 않게 하며(white-space: nowrap) 글자가 레이아웃을 벗어나지 않게(display: inline-blo

네이버뉴스-TV연예 1일차 작성한 본문 (참고 사이트) > 전체 레이아웃 레이아웃 크기로만 구분한다면 맨 위 헤더의ent-header, 아래 본문의 ent-left, ent-right로 구성된다. 아직 ent-right의 내용은 구성하지 않았으나, 레이아웃 구분을

네이버뉴스-TV연예 2일차 작성한 좌측 본문 어제는 ent-section-3까지, 오늘은 ent-section-4~ent-section-9까지 작성하였다. > 자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다. 체크포인트 글자용 태그의 주의

우측 본문은 ent-section-10에서 ent-section-13까지의 레이아웃으로 이루어져있다.이번 본문은 난이도가 쉬워 남는 시간에 footer를 추가로 작성해 보았고, 자세한 코드는 아래에 링크해 두었다.강의 영상 없이 작성하다보니 어려운 점이 많았다. 실제

네이버 게임 1일차 작성된 본문 자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다. css-in-js 원본 사이트를 보면 개발자가 썼다기엔 길고 까다로운 클래스들이 많은데 이는 css-in-js 라는 툴로 자동 생성된 클래스라고 한다. 이는 나

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.윤곽선 대신 그림자 사용레이아웃의 경계선을 나누기 위해 border 대신 border-bottom을 사용하여 좀더 부드러운 효과를 주었다.(그림자 미적용)(그림자 적용)border-bottom옵션의 사

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.ol 태그와 li태그ol 태그는 리스트를 묶는 태그이기 때문에 그 하위에는 반드시 li태그가 있어야 한다.(결과)클래스 덮어쓰기section4에서 image-txt 클래스를 다시 쓰는데, 이 때 앞에서

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.position: absolute가 적용된 자식 레이아웃은 position: flex인 부모 레이아웃에 영향을 받지 않는다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.:nth-child 란?CSS 선택자 정리오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

아마 정해진 강의 길이 보단 조금 더 진행한 것 같다.자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.본문 레이아웃이전에 페이지 상단과 좌측을 position: float으로 정해놨기 때문에, 같은 3차원인 position: absolute로 정하고

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

CSS 추가설명 시작하기 전에 부제목1 css 변수 : 최근 기능. 익스플로러에서는 거의 사용이 안된다. 업데이트가 끊겼기 때문인 듯. 참고할 사이트 링크 css리셋 css normalize 어려웠던 점 및 해결 방법 학습 소감 진행한 코드 링크 오늘

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

자세한 코드는 아래에 링크해 두었고, 유념할 부분만 정리해 작성한다.오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

강사님의 자바스크립트 2/2 의 58분 ~ 끝까지 공부한 내용이다.객체(object)객체는 파이썬의 class와 비슷한 듯 하다. 배열과 비슷한 듯 하면서도 모든 양식의 요소(property)를 가질 수 있으며, 대신 요소를 선언 할 때 (key: value)의 형식으