Til
[TIL] CSS 테이블, 포지션, 플로트
✍ Today I Learned table 요소에서 border-collapse: collapse; 를 적용하면 단일 텍스트로 변경된다. 티스토리 테이블 표와 같은 스타일로 꾸미려면 nth-child(even or odd) 선택자를 이용한다. tr:nth-child(even) { background-color: #f2f2f2; } vertical-align을 적용하려면 height 값이 설정되어야 한다. table에서 overflow 속성을 적용했을 때 콘텐츠의 양이 충분하지 않다면 min-width 값을 설정해야 한다. text-overflow: ellipsis; 이렇게 설정하면 넘치는 콘텐츠는 줄임표(...)로 표시된다. 레이아웃을 위한 속성으로 position과 float이 있다. 크롬 확장프로그램..
[TIL] CSS 아웃라인, 대체글꼴, 디스플레이 속성
✍ Today I Learned CSS에서 설정하는 height와 width는 내용(content)을 대상으로 한다. 아웃라인(outline)이란 html 요소의 가장 바깥 부분, border 외부에 그려진 선이다. border 속성과는 달리 html 요소의 전체 크기에는 포함되지 않는다. 주로 button에 사용된다. CSS에 text-shadow와 box-shadow 속성을 이용해서 그림자를 추가할 수 있다. font-family 속성을 이용하여 글꼴을 지정할 땐, 대체글꼴을 같이 지정해주는 것이 좋다. 태그를 사용하면 여백과 줄바꿈이 그대로 브라우저 화면에 나타난다. list-style-position: inside; 이렇게 하면 리스트 마커(marker)까지 리스트 태그에 포함된다. display..
[TIL] CSS 선택자
✍ Today I Learned CSS의 결합 선택자, 의사 선택자 등 선택자에 대해 자세히 알게 되었다. 매번 감으로 썼었는데..! 사용 기호 명칭 설명 , 그룹 선택자 여러 선택자 같이 사용 (공백) 자손 선택자 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택 > 자식 선택자 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택 태그.클래스 특정 class 속성을 가진 요소 중 특정 HTML 요소만 클래스의 영향을 받도록 지정 :nth-child() 의사 선택자 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택 :not(선택자) 의사 선택자 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함 [속..
[Java/백준] 개 #10172
문제 풀이 저번 고양이 문제처럼 이스케이프 문자(escape chracter)를 이용하여 출력하는 문제이다. class Main { public static void main(String[] args) { System.out.println("|\\_/|\n|q p| /}\n( 0 )\"\"\"\\\n|\"^\"` |\n||_/=\\\\__|"); } } 이렇게 제출했더니 컴파일 에러가 떴다. 엥? 나 제대로 적었는데? 아 C++로 제출했구나🤣 다시 JAVA11 로 제출해서 성공~
[TIL] HTML 실습
✍ Today I Learned 회원가입, 로그인, 비밀번호 찾기, 아이디 찾기 페이지 마크업 작업을 진행했다. html 마크업 작업을 할 때는 보이는 그대로 만들자 화면에 나타나는 요소들 먼저 작업하고 기능은 이후에 작업 '이 정도는 알지~' 생각했는데 내가 아는 건 진짜 아는 게 아니었다😂 닷홈(https://www.dothome.co.kr/)의 무료 웹호스팅 서비스를 이용하여 내가 만든 예제 파일들을 내 도메인에 서비스했다.
[TIL] HTML의 입력을 담당하는 form, input
✍ Today I Learned html form 태그의 제대로된 사용법을 알게 되었다. form 태그 내 작성된 데이터는 action 속성의 위치로, method 속성의 방식에 따라 전달된다. action 속성을 생략하면 현재 페이지로 데이터를 전송하고 리로딩 된다. (나를 힘들게 했던..) label 태그의 for 속성과 input 태그의 id 속성은 연동된다. 같은 값으로 설정하면 label 태그로 감싸진 텍스트를 클릭했을 때 input 창이 선택된다. input 태그에 속성이 이렇게 많았다니? readonly는 읽기전용 속성 disabled는 비활성화된 속성 required는 필수입력항목 속성 pattern 속성으로 유효성 검사를 할 수 있다. 파일이 첨부된 form은 enctype 속성 값을 m..
[TIL] HTML 복습2
✍ Today I Learned html 속성의 값은 대소문자를 구분하지 않지만 가독성 및 협업을 위해 소문자로 작성하는 것이 좋다. 이미지 파일들은 파일의 헤더영역에 image/jpeg, image/png 등의 형식을 갖고 있으므로 파일 확장자명과 관계없이 헤더 정보로 판단한다. (MIME type) img 태그의 size 속성에서 %는 브라우저 크기 대비 비율을 의미한다. table 태그는 레이아웃 용도로 사용하지 않는다. html class 네임은 kebab-case를 주로 사용한다. CSS 상대단위인 em은 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이고, rem은 최상위 요소(root, 즉 html) font-size 속성값이 기준이다. CSS 선택자를 쉼표로 연결하면 여러..
[TIL] HTML 복습
국비 수업 첫날, 여러 사정으로 첫 수업부터 비대면으로 진행하게 되었다. 8시간은 생각보다 더 빡세다.. 오늘은 수업에서 HTML 부분 진도를 나갔다. 이미 내용을 알고 있는 사람들은 다른 걸 하라고 추천해주셨지만 '내가 과연 HTML을 다 알고 있나?' 하는 의심이 들어서 복습하는 마음으로 수업을 듣기로 했다. 2022.03.15 - [HTML] - [HTML] HTML이란? 2022.03.15 - [HTML] - [HTML] 태그(tag)의 역할과 사용방법 시멘틱 태그란 마크업 대상 컨텐트가 화면에 표현되는 방식을 결정하기 위함이 아닌, 해당 컨텐트에 어떤 의미(역할 또는 목적)를 부여하기 위해서 사용되는 태그이다. (출처:https://www.daleseo.com/html-semantic-marku..