> position element 의 위치를 설정하는 css property top, bottom, right, left property 를 조합해서 위치 설정 (위, 아래, 오른쪽, 왼쪽 "으로부터" 얼마나 떨어져 위치할지) 1. relative 원래 위치 (normal position) 기준으로 위치 설정 example1 example2 example3 2. fixed viewport (브라우저 창) 기준으로 위치 설정 (정상적인 배치 흐름에서 제외됨) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum quis corporis obcaecati, asperiores odit accusantium architecto voluptatem..
> block element 를 한 줄에 (가로로) 나열하기 div 의 display 기본 설정 값은 block , block element 는 element 를 따로 작성하면 새로운 줄에 표시됨 그런데 한 줄에 나열하고 싶다면? display (css property) 를 inline-block 으로 설정 → display:inline-block; inline 으로 설정하면 크기 (width, height) 가 적용되지 않음 inline-block 으로 설정하면 크기 (width, height) 설정이 그대로 적용됨 * table 로 코드를 작성하는 경우도 간혹 있음 this is example > flexbox 1 2 3 4 5 flex container: display 값이 flex 로 설정된 요소..
> list 1. ordered list (순서 있는 리스트) tag: ordered list - 순서 있는 리스트 정의 tag: list item - 리스트 항목 작성 this is the ordered list 숫자 (1234...)로 표시되는 것이 기본, 다른 스타일로 표시하고 싶다면 (CSS property) list-style-type 작성 ↓ this is the ordered list this is the ordered list this is the ordered list this is the ordered list this is the ordered list 2. unordered list (순서 없는 리스트) tag: unordered list - 순서 없는 리스트 정의 tag: list..
> link tag a, attribute href - 이동할 페이지 주소 작성 1. 링크를 새로운 탭으로 열게 하려면, attribute 로 target="_blank" 작성 다음 2. vscode 내에 저장한 다른 파일로 이동하려면 attribute href 값으로 해당 파일명 작성 폰트연습 3. 이미지를 클릭하여 다른 페이지로 이동하려면 a element 의 content 로 img tag 작성 (↓이미지는 vscode 에 저장되어있으며 img tag 의 src 값으로 경로와 파일명 작성, 같은 폴더에 위치한 경우 경로 작성 불필요) 4. 밑줄 없는 링크를 작성하려면 attribute 로 style="text-decoration:none;" 작성 밑줄없는링크 > pseudo class 가상 클래스 ..
> font 폰트의 종류 - familiy 로 묶어서 분류 monospace 는 글자간 간격이 일정하여 코딩할 때 많이 사용함 1. font-family: 글꼴을 설정 font family 명을 작성 여러개 작성 시 앞에서부터 차례대로 시도하며, 시스템에서 표시가능한 폰트이면 선택됨 작성한 family 의 폰트 중 어떤 폰트를 표시할지는 (크롬기준)설정-글꼴맞춤설정 에서 설정되어있음 * web safe font: 웹에서 문제없이 안전하게 사용가능한 폰트 - (영문기준) Arial, Verdana, Georgia, Courier New 등 This is a paragraph, shown in the Times New Roman font. This is a paragr..
> box model element 의 구조 - content, padding, border, margin content: 텍스트나 이미지가 표시되는 내용 부분 padding: content 주위를 투명하게 하는 부분 border: content 와 padding 을 둘러싸는 부분 margin: border 바깥 부분을 투명하게 하는 부분 * 페이지의 element 에서 우클릭 - 검사 - Styles 맨 아래의 그림에서 margin, border, padding, content 가 각각 얼마나 차지하고 있는지 표시됨 > border 1. border-style: border (테두리) 의 모양 설정 value: solid(직선), dotted(점선), double(이중선)..
> CSS Cascading Style Sheets 의 약자 HTML 의 element 가 화면에 어떻게 표현될지 설정함 웹 페이지 여러 개의 배치를 한번에 설정할 수 있어서 작업량을 줄여줌 HTML 코드와 하나의 파일에 작성되지 않아도 되며, CSS 파일로 따로 저장할 수 있음 → 즉 HTML 은 페이지의 내용과 구조를 결정, CSS 는 페이지의 스타일을 결정하는 코드 * attribute 가 아닌 element 로서의 - head element 에 포함됨 - 내부에 css 코드를 작성함 위의 예시에서 h1{ }, p{ } 는 해당 문서의 모든 h1, p 요소를 괄호 안{ } 과 같이 설정하겠다는 의미이며, h1:last-of-child{ } 는 문서의 마지막 h1 요소만 괄호 안{ } 과 같이 설정하..
> attributes 속성 element 에 대한 부가적인 정보를 제공 element 의 시작태그에 작성 하나의 element 에 여러 개의 attributes 가 작성될 수 있음 name 과 value 를 쌍으로 작성 (값은 작은/큰 따옴표 안에 작성, 값은 생략 가능) → name = "value" (값에 작은 따옴표가 있으면 값을 큰 따옴표 안에, 값에 큰 따옴표가 있으면 값을 작은 따옴표 안에 작성) → HTML Attribute Reference 참고 (각 태그에 작성가능한 attributes 확인 가능) 예1) Visit W3Schools 예2) -> 빈 요소 (시작태그만 존재) 예3) -> 빈 요소, attributes 3개(src, width, height) > href hyperlink..
https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com > HTML 1. HTML 은 Hyper Text Markup Language 의 약자 2. HTML 은 웹 페이지를 만드는 표준 마크업 언어 (각각의 브라우저마다 표준이 있음 / 우리는 크롬을 기준으로 배울 예정..
