일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 애니메이션
- HTML
- php
- Animation
- 풀스택
- SWIFT
- keyframes
- css3
- iPhone
- MAC
- xcode
- button
- front-end
- image
- javascript
- html5
- 비전공자
- 백엔드
- effect
- 프론트엔드
- CSS
- ipad
- 비전공 개발자
- 개발자
- hover
- iOS 개발자
- 자바스크립트
- jQuery
- IOS
- react
- Today
- Total
목록HTMLCSS (8)
비전공자 개발일기
HTML CSS body { margin: 0; } .div1 { background-color: #ff0000; width: 100%; height: 60px; } .div2 { background-color: #ffa500; width: 100%; height: 350px; } .div3 { background-color: #ffff00; width: 100%; height: 320px; } .div4 { background-color: #008000; width: 100%; height: 385px; } .div5 { background-color: #0000ff; width: 100%; height: 200px; } .div6 { background-color: #4b0082; width: 100..
CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..
선택자 { 속성1: 값1; 속성2: 값2; /* 주석 */ ... } 선택자: 스타일을 적용할 대상 속성: 스타일의 종류 값: 스타일의 값 선언 방식 내장 방식: 의 내용으로 스타일을 작성(HTML) 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML) 링크방식:로 외부 css문서를 가져와서 연결하는 방식(병렬 방식) @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식) @import url("") div { .... } CSS 선택자 기본선택자 전체 선택자: 모든 요소를 선택(*) 태그 선택자: 태그를 선택 (태그명) 클래스 선택자: (.class명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..
프론트 엔드 개발자: HTML, CSS, Javascript를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것 HTML: 웹의 구조 CSS: 웹의 정적 표현(시각적) Javascripit: 웹의 동적표현 특수 문자 ` : 백틱, 그레이브(Tab 위의 키) ~ : 틸드, 물결 표시(Tab 위의 키) ! : 느낌표, 엑스클러메이션 @ : 앳, 골뱅이 # : 샾, 넘버, 우물점 $ : 달러 % : 퍼센트 ^ : 캐럿 & : 앰퍼센드 * : 에스터리스크, 별표 - : 하이픈, 대쉬 _ : 언더스코어, 로우대쉬 = : 이퀄, 동등 " : 쿼테이션, 큰 따옴표 ' : 아포스트로피, 작은 따옴표 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, ..
나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?
제목: 끝말잇기 목표: Javascript 와 html, css를 활용하여 끝말잇기 코드 작성 let body = document.createElement('h1'); document.body.append(body); body.textContent = '끝말잇기'; let firstWord = document.createElement('div'); firstWord.textContent = '컴퓨터'; document.body.append(firstWord); let form = document.createElement('form'); document.body.append(form); let input = document.createElement('input'); form.append(input); le..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/biRiZs/btq9Dne0mS0/V7ram8eUROl411oazUa0Lk/img.jpg)
MOMENTUM CLONE CODING 작업환경 VS CODE HTML, CSS, JAVASCRIPT OPENWEATHER 들어간 기능 현재 날짜, 시간 표시 (빨간색) 현재 지역, 기온, 날씨 표시 (주황색) 사용자 이름을 입력 받음 (노랑색) To-Do-List 입력, 삭제 (초록색) 랜덤 명언 (파란색) 랜덤 배경 사진 (보라색)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b1TMOl/btq9tIK6Bf3/7i8rk64zVdfydGl3zKSZWK/img.jpg)
개요 Javascript with HTML Javascript with CSS Event localStorage Javascript with HTML console에서 document라고 입력하면, 본인이 작성한 HTML 코드가 나옴 이를 활용해, HTML의 정보 변경도 가능(새로고침을 하게 되면 변경한 기록은 다 지워짐) document = Web page HTML에 Javascript 연동시, 에 삽입 getElementById(" ") = querySelector("# ") const a = document.getElementById("아이디명") const a = document.querySelector("#아이디명") querySelector( ) VS querySelectorAll( ) VS ..