전체 글 409

프론트엔드 CSS - padding, margin, box-sizing , 테두리, 레이아웃

박스모델 : HTML 요소(태그)는 사각형의 모양을 하고 있다 구성요소에는 테두리 내용물 안쪽여백과 바깥여백 패딩, 마진 패딩: 안쪽 여백 마진: 바깥 여백 ex. padding(margin): 위오아왼 (시계방향) : 위 오왼 아래 : 위아 오왼 : 모두 ex. padding: 9px 3px 2px 5px; 만약 한 방향만 padding 이나 margin을 주어야 한다면 padding: 0 0 16px 0 padding-bottom: 16px; // padding vs padding-bottom의 우선순위는 같음 ; 나중에 나온 것이 덮어씀 top, bottom, right, left 박스사이징 태그(요소)의 크기를 어떤 것을 기준으로 계산할 것인가 box-sizing content-box(기본값) 내..

Frontend/CSS 2023.02.11

프론트엔드 CSS 속성 - 글꼴, 크기단위, 배경

CSS 속성: 크기(단위) px 절대 크기 지정 방식 내가 정해준 크기가 무조건 적용 rem 문서 요소 최상위 태그 = html의 font-size와의 배율 1rem = 16px (html font-size default value = 16) 2rem = 32px em 상위 요소(부모) font-size의 배율 1.5em = 부모 요소 font-size 1.5배 * 아주 특별한 경우에만 사용 ; 미디어 쿼리 % 부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율] * 가장 가까운 요인이 되는 요소와의 비율 ; px, rem, em, & 중 px, rem, &을 대부분 많이 사용 vw(viewpoint width), vh(viewpoint height) 100vw ; 사용자 해상도의 100% 길이 ;..

Frontend/CSS 2023.02.11

JAVA 코딩 제어문 - 반복문 : while, for, do ~ while문

제어문 : 코드의 흐름을 제어하는 문장(문법) 코드의 일정 부분을 선택하여 실행하거나 코드의 일정 부분을 반복하여 실행하는 제어문 제어문의 종류 조건문 : if ~ else문 조건식의 결과가 참과 거짓에 따라 실행 내용을 선택하여 실행하는 제어문 조건문 설명 : https://developernew.tistory.com/13 선택문 : swich ~ case문 값에 따라 실행 내용을 선택하여 실행 선택문 설명 : https://developernew.tistory.com/14 반복문 : while, for, do ~ while 코드의 일정 부분을 반복하여 실행하는 제어문 조건식이 [참]일 동안 반복하여 실행한다 ; [거짓]이 될 때 종료함 반복문 설명: https://developernew.tistory..

Backend/JAVA 2023.02.06

프론트엔드 Text관련 CSS 속성 - color, text-align, line-height, text-indent, text-decoration, text-shadow

Text CSS 속성 ** color : 텍스트 색상 letter-spacing : 자간, 문자 단위 간격 word-spacking : 단어 사이 간격 (띄어쓰기 간격) ** text-align : 텍스트 정렬(left, right, center) ** line-height : 줄간 (줄과 줄 사이의 간격) * text-indent : 첫 줄 들여쓰기 (상품목록이나 매거진 사이트에서 들여쓰기가 되어 있는 상태가 많다 ; 다른 곳에서는 잘 쓰지 않음) * text-decoration : 텍스트의 여러 효과(밑줄) 설정하거나 제거 text-transform : 영문자 대소문자 결정 font-variant : 소문자를 더 작은 크기의 대문자로 변환 * text-shadow : 텍스트의 그림자, 번짐 효과 등을..

Frontend/CSS 2023.02.05

프론트엔드 웹 CSS 적용법(스타일링 기법), 선택자

CSS? ; Cascading Styled Sheets THML 문서에 style 속성을 추가하여 시각적으로 꾸며주는 역할 디자인 부분을 담당 CSS 적용법 (스타일링 기법) 내부스타일링 HTML 문서의 외부스타일링 HTML 문서의 인라인스타일링 요소 안에 직접적으로 style 속성을 활용하여 적용 ex) ... 내부 외부를 포함한 어떠한 CSS보다도 우선순위가 가장 높다 => 내부 스타일 : 한 html 문서 안에 작성 외부 스타일 : html 문서 외부에 작성 인라인 스타일 : 요소 안에 직접적으로 작성 선택자 : 전체 선택자, 요소 선택자, id/class 선택자, 그룹 선택자, 가족 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자 CSS 문법 ---- { ... CSS } 전체 선택..

Frontend/CSS 2023.02.05

프론트엔드 HTML 시멘트 웹 태그, table, datelist, form, iframe

시멘틱 웹 태그 전 세계에 만들어진 웹 사이트가 증가함에 따라 검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 요구하는 사항이 증가 따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 시멘틱 웹 태그의 장점 1. 웹 접근성 : 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록 접근성 자체를 높이는 행위 2. 검색 엔진 최적화 (SEO) : 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 3. 가독성 ex. ... ... ... ------------------------------------------------- ... ....

Frontend/HTML 2023.02.04

JAVA 코딩 제어문 - 선택문 : switch ~ case문

제어문 : 코드의 흐름을 제어하는 문장(문법) 코드의 일정 부분을 선택하여 실행하거나 코드의 일정 부분을 반복하여 실행하는 제어문 제어문의 종류 조건문 : if ~ else문 조건식의 결과가 참과 거짓에 따라 실행 내용을 선택하여 실행하는 제어문 조건문 설명 : https://developernew.tistory.com/13 선택문 : swich ~ case문 값에 따라 실행 내용을 선택하여 실행 선택문 설명 : https://developernew.tistory.com/14 반복문 : while, for, do ~ while 코드의 일정 부분을 반복하여 실행하는 제어문 조건식이 [참]일 동안 반복하여 실행한다 ; [거짓]이 될 때 종료함 반복문 설명: https://developernew.tistory..

Backend/JAVA 2023.02.03

JAVA 코딩 제어문 - 조건문 : 단순if문, if~else문, if~else if~else문

제어문 : 코드의 흐름을 제어하는 문장(문법) 코드의 일정 부분을 선택하여 실행하거나 코드의 일정 부분을 반복하여 실행하는 제어문 제어문의 종류 조건문 : if ~ else문 조건식의 결과가 참과 거짓에 따라 실행 내용을 선택하여 실행하는 제어문 조건문 설명 : https://developernew.tistory.com/13 선택문 : swich ~ case문 값에 따라 실행 내용을 선택하여 실행 선택문 설명 : https://developernew.tistory.com/14 반복문 : while, for, do ~ while 코드의 일정 부분을 반복하여 실행하는 제어문 조건식이 [참]일 동안 반복하여 실행한다 ; [거짓]이 될 때 종료함 반복문 설명: https://developernew.tistory..

Backend/JAVA 2023.02.03

JAVA 코딩 System.in 표준 입력 스트림, Scanner 스캐너

Stream.in : 표쥰 입력 스트림(객체) .read() : buffer안에서 데이터를 1byte씩 읽어 오는 메소드 e.g) import java.io.IOException; public class Test01 { public static void main(String[] args) throws IOException { System.out.print("정수 입력 : "); int su = 0; while(true) { int a = System.in.read(); if(a == 13) { break; } su *= 10; su += (a-48); // System.out.println(a); } buffer(버퍼) : 데이터의 처리속도, 단위, 시간 등이 서로 다른 두 장치나 프로그램 사이에서 데이..

Backend/JAVA 2023.02.01

JAVA Stream, 제어문자, 서식문자

IO 데이터 입출력 IO: Input / Output ; 입출력 CPU 기준으로 데이터가 들어가면 입력, 나오면 출력 Stream JAVA에서 데이터를 주고받기 위한 통로 모든 IO는 stream을 통해 데이터를 주고받는다 표준 입출력을 제외한 모든 IO에서는 stream을 직접 만들어야 한다 (C, JAVA 모두 stream 방식) 표준 입출력 System.in : 표준 입력 스트림(객체) System.out : 표준 출력 스트림(객체) .println(); 출력한 후 다음줄로 이동 .print(); 출력만 .printf(); C언어의 잔재 System.out.print("출력만"); System.out.println("출력한 후 다음줄로 이동"); 제어문자 : 문자열에서(콘솔창에서) 특수한 기능을 하..

Backend/JAVA 2023.01.31